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?
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.