Complex Divs (float/clear) - Two main columns + smaller internal columns

问题

I have the following basic layout:

<div id="sidebar" style="float: left; width: 250px; display block;"></div>
<div id="maincontent"></div>

Fairly self explanatory - on the left I have navigation stuff and info, and the rest of the page is the main content.

I have a user control for which I'm using the following:

<div id="weather-data">
    <div id="today" style="float: left;"></div>
    <div id="tomorrow" style="float: left;"></div>
    <div id="etc" style="float: left;"></div>
</div>

Each block displays an image and some text for the daily weather.

All the above displays fine, but the problem is as such:

The height of the sidebar is (as an example) 400px high. The maincontent div houses a child div weather-data which is 200px high. Within the weather-data div are smaller divs floated to the left.

Below the weather-data div I want some text. This is where the difficulty lies.

If I clear the float after weather-data then it also clears the sidebar causing a big chunk of whitespace.

<div class="weather-data">
    <div id="today" style="float: left;"></div>
    <div id="tomorrow" style="float: left;"></div>
    <div id="etc" style="float: left;"></div>

    <div style="clear: left;"></div>
</div>

Some crude diagrams...

What I want:

[@@@][##########################]
[@@@][##########################]
[@@@][##########################]
[@@@][ Additional text          ]
[@@@][                          ]
[@@@][                          ]
[   ][                          ]

What I get:

[@@@][##########################]
[@@@][##########################]
[@@@][##########################]
[@@@][                          ]
[@@@][                          ]
[@@@][                          ]
[   ][ Additional text          ] <-- Additional text jumps down below the sibebar content :o(

Where @ is sidebar content, # is the weather-data div collection.

Slight update... setting overflow: hidden; on the weather-data div works, but isn't that risky?

回答1:

You can use overflow: hidden, it will not clip away your content as long you don't specify a height for the div with this property.

回答2:

Try to append <div style="clear:both"></div> at the end of the "weather-data" div.

来源：https://stackoverflow.com/questions/6835661/complex-divs-float-clear-two-main-columns-smaller-internal-columns

标签

css

html

css-float

clear