Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jimmy Mannan
Jimmy Mannan
5,201 Points

Why is this extra <div> needed?

This code is from a website template taken off the net for practice.

https://w.trhou.se/kdh50rld25

I have been trying to understand why they have a <div> called 'resize'. In the code above I have only included 'header part' but this 'resize div appears through out the code of this template..like within the main-content div, there is content resize div same for footer etc...but I have not been able to figure out its purpose.

Any tips please...

regards jimmy

1 Answer

tootiemcflow
tootiemcflow
5,601 Points
tootiemcflow
tootiemcflow
5,601 Points

It looks like the div with the header_resize class is used for centering the navigation and header text to the center of the page.

Try commenting out the header_resize class in the css and see what happens when you refresh the page.

Jimmy Mannan
Jimmy Mannan
5,201 Points

Hello Robby,

Thanks for replying.

When I remove this resize div, content moves a bit to left and I am able to realign it by changing the margin/padding properties.

So again I am wondering why add a new div for this...and for all the blocks of code in this template...

tootiemcflow
tootiemcflow
5,601 Points

Hey Jimmy Mannan,

Honestly, I'm not too sure why you would need it... As you said, you can just refactor the css to get rid of the div.

There's actually a few things you could get rid of and opt out for a pure CSS approach. For example, the empty divs with the clr class value. You could use the micro clearfix solution instead.