CSS Layout with Sidebar and clear:left

  • rbredow

    (@rbredow)


    17 years, 8 months ago

    I have a css layout conundrum that someone here might be able to help me with. I want to use CSS to layout a page with a sidebar on the left and a content section in the middle. I float: left; the sidebar div and let the content run down the middle…so far so good.

    My issue is that when I want to float: left; an image in the “content” area and then clear the text or something below that image with a clear:left, it clears below the sidebar. Is there anyway to “clear” just in the content area and not clear it for the whole page?

    I’ve tried making the content div position: relative with no success. I’ve also tried using absolute positions to position the sidebar and the content section but then I run into the problem of not being able to reliably place my footer area without knowing if the sidebar or the content div is taller.

    Any advice would be welcome.

    Thanks-

    -Rob

Viewing 2 replies - 1 through 2 (of 2 total)
  • theiconoclast31

    (@theiconoclast31)

    17 years, 8 months ago

    I suspect it’s in the order of the divs in the index.php page – try switching the content and sidebar divs and playing with margins to keep the same position. Then, the clear: left; may not affect the sidebar.

    Thread Starter rbredow

    (@rbredow)

    17 years, 8 months ago

    I think I found a way to “nest” floats exactly as I was hoping from position is everything:

    If you have the above described problem, one way to prevent the clearer from clearing the adjacent float column is to make the container (where the clearer resides) a float itself. If the clearer is within a floated container, it will clear only the floats that preceed it within that floated container. The clearing element will not reach outside of its floated container to clear external floats. Also, the clearer has no effect on its floated parent container, other than to make it enclose any nested inner floats.

    So, I just re-worked my layout to float the sidebar left, and float the content left against it. Now, floats that happen inside the content area are not effected by the sidebar.

    Thanks-

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘CSS Layout with Sidebar and clear:left’ is closed to new replies.

Tags