SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist Redivider's Avatar
    Join Date
    Nov 2003
    Location
    PA
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clearing floats in a separate container?

    I have an issue with a 2 column CSS layout. It was created using a method I've seen many people use... the left column (navigation) is given a fixed width and floated left and the main content area is given a left margin equal to the width of the left column (it's not floated).

    The problem is that if there are any floated elements in the main content area that need to be cleared... the content below them is clearing the content in the left column.

    You can see an example of this here:
    http://www.29thfloor.com/clearfloat.html

    I can easily fix the issue by floating the main content area and giving it a fixed width. The problem is that this is an issue with a CMS that our company sells, so I'd like to be able to accomodate this layout method without having to suggest a workaround. Unless of course this is the expected behavior... I just thought that the clear property only applied to elements within the same container. But in this case it's clearing even the contents of a totally separate container.

    I haven't been able to find any examples of other people having this problem... so maybe I'm just expecting incorrect behavior? Any thoughts?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    No this is the correct behavior with floats and they will clear any other floated elements above them in the html unless the float is contained in a parent float or has overflow other than visible set.

    This example explains the problem and offers the floated solution.

  3. #3
    SitePoint Evangelist Redivider's Avatar
    Join Date
    Nov 2003
    Location
    PA
    Posts
    465
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! That's exactly what I was looking for.


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
  •