Support » Themes and Templates » need CSS help to clear:left but not clear floating left div

  • Hi,

    Need CSS help. I need help to clear:left JPG thumbnails in my 2nd-column div, but WITHOUT clearing a float:left 1st-column div.

    Here is my setup:

    —————– HEADER DIV——————————————

    — Sidebar Div– __________ — RIGHT DIV (not floated)

    —————– FOOTER DIV —————————————-
    (property of footer is set to clear:both)

    SIDEBAR DIV is float:left; width 160px
    RIGHT DIV is not floated, and contains all the content. 600px;

    WP generates the content of the sidebar, so I cannot assign a height attribute.
    WP generates the right div content, so I cannot assign a height either.

    Problem I need to solve:
    In column #2 — the right div, I want to float-left small thumbnail jpgs, and write text flowing along the right side. If the text does not naturally drop below the jpg, I want to clear:left to drop down to a new line and start the process over (new thumbnail, new text beside it).

    *** The problem is that when I clear:left on the jpg, it NOT ONLY clears the JPG, but also clears:left on the whole Sidebar DIV, thereby dropping the next line WAY DOWN on the page.

    Attempted solution:
    If I set the sidebar div to position:absolute, it works ok EXCEPT (and big except) that if there is not much content in the RIGHT DIV, then the FOOTER DIV is not low enough on the page, thereby overlapping the Sidebar Div.

    Obviously, this whole design could be EASILY accomplished with TABLES, but those are blasphemy these days, so I would like a more “modern” solution. I have googled this all day, and have not seen a solution. Help is appreciated.

  • The topic ‘need CSS help to clear:left but not clear floating left div’ is closed to new replies.