Deprecated: Function set_magic_quotes_runtime() is deprecated in /home/tangible/public_html/textpattern/lib/txplib_db.php on line 14
Tangible: Get a div to expand around floated content
Aug 08 2007

Get a div to expand around floated content

Floated elements are a common element of many pages, and dealing with them can be a bit tricky.

The Problem

When your parent div contains a floated element that has a height greater than that of the non-floated elements in the parent div, the floated element will expand past the border of the parent div.

Here’s a simple page with this problem

Here’s the source code:

<html>
    <head>
        <title>
            CSS Demo: 
            Expanding divs to surround their floated contents
        </title>
        <style>
            div {
                padding: 1em;
            }
            #container {
                border:   1px solid black;
                background-color: #ccc;
                padding:  1em;
                margin: 1em;
            }
            #floated_div {
                float:  left;
                width:  200px;
                border: 1px solid red;
            }
            #content_div {
                width:  150px;
                margin-left: 250px;
                border: 1px solid blue;
            }
        </style>
    <head>
    <body>
        <div id="container">
            I am the container div.
            <div id="floated_div">
                <p>
                    I've got a lot of stuff in me, and will 
                    overflow the boundaries of the container div.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer 
                    adipiscing elit. 
                    Suspendisse eleifend lorem id sapien. 
                    Nam eget odio. In 
                    diam. In quis massa non lorem sollicitudin 
                    pretium. 
                    Praesent enim purus, nonummy in, varius 
                    ut, consequat a, 
                    nisi. Etiam at turpis. Praesent porttitor eleifend 
                    magna. 
                    Aliquam erat volutpat. Fusce porta blandit dui. 
                    Suspendisse 
                    rutrum est in urna. Nullam condimentum arcu a 
                    nulla. Mauris 
                    suscipit accumsan urna.
                </p>
                <p>
                    Nunc erat lacus, euismod quis, malesuada quis, 
                    ultricies 
                    at, tortor. Vestibulum placerat scelerisque arcu. Ut 
                    ultrices mi ac augue. Mauris condimentum molestie 
                    enim. 
                    Integer sem. Lorem ipsum dolor sit amet, 
                    consectetuer 
                    adipiscing elit. Nulla facilisi. Integer ac sem. Sed 
                    ipsum 
                    purus, mattis eget, sodales et, semper ac, sapien. 
                    Morbi 
                    ipsum neque, pretium at, placerat nec, sodales non, 
                    orci. 
                    Cras magna risus, lacinia eget, sagittis sit amet, 
                    egestas 
                    id, quam. Cras quis diam. Cras varius metus et est. 
                    Aliquam 
                    ullamcorper, massa a rutrum porttitor, tellus nibh 
                    elementum
                    tortor, vitae pulvinar nulla ante eu magna. Lorem 
                    ipsum dolor 
                    sit amet, consectetuer adipiscing elit. Curabitur 
                    laoreet 
                    elit at est. Duis at libero id lorem ultricies accumsan. 
                    Sed 
                    gravida volutpat nibh.
                </p>
                <p>
                    Proin hendrerit accumsan arcu. Maecenas aliquam, 
                    urna eget 
                    ornare facilisis, justo felis ultrices enim, vel porttitor 
                    tellus lorem a metus. Class aptent taciti sociosqu ad 
                    litora 
                    torquent per conubia nostra, per inceptos 
                    hymenaeos. Nulla 
                    ante. Suspendisse potenti. Sed feugiat imperdiet 
                    arcu. In 
                    tellus eros, pretium at, ultrices sed, fermentum eu, 
                    enim. 
                    Donec nisl mi, egestas et, malesuada at, varius quis, 
                    nibh. 
                    Proin dignissim mattis libero. Sed tellus quam, 
                    dapibus eget, 
                    mollis quis, vehicula a, massa.
                </p>
            </div>
            <div id="content_div">
                I'm an unfloated content div.  
                <br />
                My parent div will expand to fit around me.
            </div>
        </div>
    </body>
</html>

The parent div has a background that I’d like to have extend behind the floated content, but the way it is right now, it won’t work.

The Solution

The solution is surprisingly simple. If you add a div with clear:both as it’s style just before the parent div closes, the parent div will expand to fit the floated div.

See the solution

Why does it work?

When you specify clear:both as the style on an element, that element will clear all divs above it to the left and the right. This forces the clear:both div below the floating div’s lower boundary.

Since the clear:both div isn’t floated, it forces it’s parent div to expand to fit.

  1. You can also put an overflow:hidden on the container and forget the extra div you use for clearing the floats.


    ChadL    Aug 14, 09:55 AM    #
  2. Chad, overflow: hidden did not solve my problem for some reason. I am trying to solve this problem in Firefox.

    Tara, your solution worked seemlessly. Thank you.


    Eric Schrader    Dec 31, 10:35 AM    #
  3. You rock. Solved a problem I’ve been trying to fix for a few hours already. Thanks.


    David    Jan 19, 11:48 AM    #
  4. Thanks for posting this. I’ve been scouring the web for many hours. Yours was the first example that I understood, but I’m still unable to get it to work. Can you help?


    Marshall    Mar 6, 02:06 PM    #
  5. Hi Marshall,

    If you can point me to the page where you’re having difficulty, I can take a look and see if I can help.


    Tara    Mar 6, 02:12 PM    #
  6. Thanks so much.

    http://capwiz.com/yo-ms/2d.html

    You’ll notice that when scrolling down, the white background and the drop shadow stop (though I’m intending for them to continue). It seems as though the content (“test, test”) isn’t pushing down the containing div. You can also see where I tried to insert the clear:both div to implement your suggestion.

    Any help appreciated. Thanks for considereing looking at this.


    Marshall    Mar 7, 05:42 AM    #
  7. Thanks again for considering this. I hope you didn’t spend much time looking at it. I had to go with another solution as well as remove the link. Hope this wasn’t a waste of time for you. Thanks for your helpful site!


    Marshall    Mar 10, 05:31 AM    #
  8. Dear god, I thought I’d used a br / with clear in the past and assumed it was something else causing it not to function correctly in IE. This did it, thanks a bunch.


    Zardoz    Mar 26, 09:26 AM    #
  9. I’d been coding around that issue for some time (just doing various things to avoid the situation). Today I was thinking that there had to be a simple solution and found this post – thanks a mil!


    Michael    Apr 13, 01:20 PM    #
  10. Thanks a bunch for this clearly worded explanation/fix. I have been boggled by this for ages.


    Jordan Eldredge    May 8, 12:48 PM    #
  11. You’re awesome! I would kiss you if you didn’t think it was creepy.


    C    Jun 23, 07:18 AM    #
  12. Thanks, such a simple solution and it works great!


    Peppermint Groove    Sep 15, 07:37 AM    #
  13. Thank you!!! That was killing me!!


    Ryan    Mar 18, 12:39 PM    #
  14. Wow, You Just Save my day! So i have done many a search in various forums and on google and i came up short so i’m lucky so solved my dilemma here! you rocK!


    Jojo Catalan    Mar 23, 12:26 PM    #
  15. great job. you’ve made my coding a lot easier. Thanks a bunch.


    Abdel    Mar 25, 06:03 PM    #
  16. Thank you, thank you, thank you, thank you, thank you!!!!!!! Oh, and did I mention, thank you? :-)


    JRH    Apr 4, 10:38 PM    #
  17. Thanks soooo much! I was trying to come up with workarounds until I found your site!


    Steve Rolfe    May 6, 08:17 PM    #
  18. Thanks.. This worked and have been searching for something easy for a couple of days now.
    Cheers


    SEO Vancouver    Jan 30, 11:11 AM    #

Add a Comment

  Textile Help

<< A Google Search Feature I'd Like to See

Presenting: XULApps.Net >>