www.webdeveloper.com
Results 1 to 6 of 6

Thread: non floating element swallows floating ones

  1. #1
    Join Date
    Sep 2009
    Posts
    51

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

  2. #2
    Join Date
    Jan 2010
    Posts
    3
    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/

  3. #3
    Join Date
    Sep 2009
    Posts
    51

    Thanks

    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?

  4. #4
    Join Date
    Jan 2010
    Posts
    3

    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>

  5. #5
    Join Date
    Sep 2009
    Posts
    51

    Alas

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

  6. #6
    Join Date
    Jan 2010
    Posts
    3

    Whatever works!

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles