Section ending earlier than I expect on one page

HTML & CSS
1

So, on the home page it is showing that the section with the id=content is just the first paragraph. However, I can see that this and the 3 columns below it are contained within the Content section.

This is content being pulled from the wordpress <?php the_content(); ?>

You can see this on the contact us page which is working fine.

Can someone tell me why the background isn’t being applied to the whole content section on the home page? Something must be causing it to end early.

thanks

2

Hi,

You haven’t contained the floats so the background won’t extend around the floated columns.

If you don’t need visible overflow you can add overflow:hidden to trigger the containing of floats.


#Content{overflow:hidden;zoom:1.0;/* ie7 fix*/}

If you need visible overflow (pop up menus or any items that need to stick out of the main section) then use the clearfix approach to clearing/containing floats.


#Content:after{
content:".";
display:block;
clear:both;
height:0;
visibility:hidden;
}
3

Thanks. It worked, but i definitely don’t understand why overflow:hidden causes the floats to be contained.

4

Overflow (other than visible) is one of the properties that create a new block formatting context and a block formatting context means that the element must take full control of the contents it holds. (e.g. If you set overflow to scroll then how could the element create a scrollbar if it did not contain its floats.)

Overflow (other than visible) is not the only property that does this but is the most useful in normal use. Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes will all contain floats automatically.

If you don’t need visible overflow then overflow:hidden is the simplest to use but is not always the best choice.

5

Thanks. I think I’m picking up what you are putting down.