non floating element swallows floating ones
Hi,
I am trying to accomplish the following:
I have a page with a div. The div encapsulates a report. The report div has within it 3 more divs, reportInfo, icons, reportBody.
reportInfo is a paragraph of text, icons contains icons with links for report downloading, and reportBody contains a wide report with tables and stuff.
I want the reportInfo to be above the top-left corner of reportBody, and icons to be above the top-right corner of reportBody. I tried floating reportInfo to the left and icons to the right. But when I do that, reportBody, instead of staying under them, floats up and kind of swallows them - so both reportInfo and icons appear overlaying the top of reportBody.
Mark-up:
HTML Code:
<div class="reportFrame">
<a name="anchor"/>
<div class="reportInfo">
</div>
<div class="icons">
</div>
<div class="reportBody">
</div>
</div>
CSS:
Code:
.reportInfo
{
float: left;
}
.icons
{
float: right;
}
How about something like this?
I wasn't sure how to do this so that the bottoms of the divs were aligned. Just floating the icons div right and having it clear left wasn't working too well. It was forcing the report Info div up so that they were uneven at the bottom. So I found something similar to what you are trying to do and modified for your layout.
Here's the site I borrowed from:
http://blog.userland.fr/post/2007/01...-column-layout
If you figured this out already or an easier or more elegant solution I'd be happy to know about it; I'm still learning myself! :)
div {
border: 1px solid red;
}
.reportBody {
text-align: center;
}
.reportInfo {
float: left;
width: 62%;
}
.reportFrame {
position: relative;
}
.icons {
position: absolute;
bottom: 0px;
left: 97%;
}
.clear {
clear: both;
line-height: 1px;
}
* html #content {
height: 1%;
}
<body>
<div class="reportFrame">
<a name="anchor"/>
<div class="reportInfo">reportInfo<br />
reportInfo<br />
reportInfo<br />
reportInfo <br />
reportInfo <br />
reportInfo
</div>
<div class="icons">Icons
</div>
<div class="clear">
</div>
</div>
<div class="reportBody">reportBody
</div>
</body>
</html>
