non floating element swallows floating ones

**romsok** · 01-06-2010 02:01 PM

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;
}

**northsound** · 01-06-2010 02:43 PM

I would try putting a "clear:both" setting on the reportBody div. Here's a link to an excellent article on using floated elements:

http://www.smashingmagazine.com/2007...u-should-know/

**romsok** · 01-06-2010 03:28 PM

Thank you - this really helped. It almost works... I need help with one final touch..
I floated reportInfo to the right and icons to the left. Now they both appear on top of the reportBody. But... icons are always top-aligned to reportInfo - which means that if reportInfo is only one line, icons are immediately above reportBody, and if reportInfo spans multiple lines, the gap between icons and reportBody increases. Any suggestions as to how I can resolve this to make icons always just a few pixels above the top-right corner of reportBody, regardless of how tall reportInfo is?

**northsound** · 01-06-2010 09:59 PM

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>

**romsok** · 01-07-2010 10:43 AM

I hate it, but I am no designer and I resorted to using tables for that...

**northsound** · 01-07-2010 10:51 AM

Hey that's ok, tables are a perfectly legitimate solution; sometimes we don't have time at the moment to go through the learning curve for other options. Anyway, I learned a lot by working out this answer, so nothing is wasted.

Good luck with your project!

Thread: non floating element swallows floating ones

Thread Tools

Display

non floating element swallows floating ones

Thanks

How about something like this?

Alas

Whatever works!

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions