Results 1 to 3 of 3

Thread: floating divs growing to be outside of container

Hybrid View

  1. #1
    Join Date
    Jan 2009

    floating divs growing to be outside of container

    This is probably a very n00bish question, sorry. I'm trying to get the hang of liquid column layouts and the problem I'm encountering is that the floating divs stretch outside of the containing div UNLESS I float the containing div too (even though logically I don't need to do that. Why would I need to float something left if it's the only column?)

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
            <style type="text/css">
                #overallContainer { background-color: red; min-height: 2em; }
                .column {float:left;}
                .blue {background-color: blue;}
                .yellow {background-color: yellow;}
                .green {background-color: green;}
                <div id="overallContainer">
                    <div class="column blue">
                        blah <br /> blah <br /> blah <br /> blah <br /> blah
                    <div class="column">&nbsp;</div>
                    <div class="column green">
                    <div class="column yellow">
                        Hello kitty <br /> Hello kitty <br /> Hello kitty <br />
                        Hello kitty <br /> Hello kitty
    The problem w/ the outer container div being floaty is that the width gets messed up. And I need to have a container div because in the page I'm working on I have multi column layout with one of the columns containing columns of its own that are wrapped in another div (because I need some non-column content above.

    Why won't the container div stretch to fit all of the divs it contains regarless of their floatiness? Is there a way to solve this problem without unnecessarily floating the container div?

    I did some googling and couldn't find explanation on why it's doing this. The only think I found is a template that floats the outer container, which I'm trying to avoid because specifying the width messes stuff up and it doesn't make sense to float something that's not really a column.

    Thanks in advance.

  2. #2
    Join Date
    Mar 2007
    You need to clear the floats to maintain the contain div height. Add the code below after your closing div for the yellow div.

    HTML Code:
    <div style="clear: both"></div>
    "Hippies.They're everywhere. They wanna save the earth, but all they do is smoke pot and smell bad."-Cartman

  3. #3
    Join Date
    Jan 2009
    That totally solves my problem. Thank you very much!!!

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