SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Section ending earlier than I expect on one page

    http://newstartlaw.com/

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code:
    #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.

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

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. It worked, but i definitely don't understand why overflow:hidden causes the floats to be contained.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by BrianBam View Post
    Thanks. It worked, but i definitely don't understand why overflow:hidden causes the floats to be contained.
    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. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    293
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I think I'm picking up what you are putting down.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •