dcsimg
www.webdeveloper.com
Results 1 to 3 of 3

Thread: floating divs growing to be outside of container

  1. #1
    Join Date
    Jan 2009
    Posts
    32

    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">
    <html>
        <head>
            <title>test</title>
            <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;}
    
            </style>
        </head>
        <body>
                <div id="overallContainer">
                    <div class="column blue">
                        blah <br /> blah <br /> blah <br /> blah <br /> blah
                    </div>
                    <div class="column">&nbsp;</div>
                    <div class="column green">
                        blah
                    </div>
                    <div class="column yellow">
                        Hello kitty <br /> Hello kitty <br /> Hello kitty <br />
                        Hello kitty <br /> Hello kitty
                    </div>
                </div>
        </body>
    </html>
    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
    Posts
    946
    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>

  3. #3
    Join Date
    Jan 2009
    Posts
    32
    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



Recent Articles