Question

I’m having issues trying to get my main container (the white background) to stretch to the bottom of the content, it currently runs in the header only. I’ve been racking my brains for ages, I’ve tried adding in a clear and also made sure that all the containers within the main container are floated but still no joy.

This is a live website and can be viewed at http://www.ridermagazine.co.uk

I’ve also noticed that my sidebar has dropped down below the content instead of displaying on the right-hand side, this lead me to believe that I had gotten my maths wrong but I’ve double checked everything and nothing seems to be out of place.

Any help would be awesome.

Thanks.

CSS code for container:

#page-wrap {
width: 926px; 
margin: 20px auto;
background-color:#fff;
padding:17px;
}

Answer 1

The problem lies in using all the float:left directives. You don’t need them if all the elements which are block elements are block elements. For example the h1 element in header is NOT a block element. It seems that somewhere is a h1 {display: inline} – e.g globally. If you overwrite this in the inspector of your browser to h1 {display: block} the white background “is growing” ;-). So my tip: remove all the float directives and start again with composing.

Remember: float is evil 😉

Just use it if you really need to. For example if you need two main div elements live next to each other. Also instead think about using overflow ….

EDIT: the error is in div id="content". Remove float:left and it works

That’s what I mean with evil float elements 😉