CSS Float causes layout to break

Question

If you copy the following HTML: http://pastebin.com/zBkzGysw into a text editor and test in a browser you will see that the yellow box has a massive height! This is because it has a class of clearfix and is clearing itself from the sidebar on the left hand side.

How can I stop this from happening?

I have tried using overflow:hidden; on the Middle column but that means if I have a table which has long content it will be cut off! Also why when doing this does using margin-left add margin on the right hand side?

that might help: http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best — Py., Sep 09 '11 at 14:45
Nope that article explains how to clear a floated element I'm asking how to deal with overflow hidden when you don't want to hide overflow and can't user overflow auto. — Cameron, Sep 09 '11 at 14:47

Andrew · Accepted Answer · 2011-09-09T16:25:27.033

Try applying display: inline-block; on your Middle div:

.Middle
{
    margin-left: 220px;
    display: inline-block;
}

You may also need to specify a width to it as well to get the layout you're after.

Update:

I've found a way to get the layout behaviour I think you're after, but I've done it by stripping out the clearfix styles. Is this any closer?

<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
        body
        {
            margin:0;
            padding:0;
        }
        .MainContent
        {
            margin: 20px;
            width:200px;
        }
        .Middle
        {
            margin-left: 220px;
            margin-top: -300px;
            vertical-align: top;
            float: left;
        }
        */
        </style>
    </head>
    <body>

        <div class="MainContent clearfix">

            <div style="width:200px;float:left;">

                <div style="height:300px;background:blue;"></div>

            </div>

            <div class="Middle">

                <div style="padding:20px;background:red;">

                    <div style="padding:10px;background:yellow;margin-bottom:20px;height:20px;">
                        <div style="float:left;height:20px;width:300px;background:green;"></div>
                        <div style="float:right;height:20px;width:300px;background:green;"></div>
                    </div>

                    <table style="border:#000 1px solid;">
                        <tr>
                            <td>ioruturiotueorit eiortueriotuoeotigggggggggggggggggggggggggggggggggggggggggggggggggggggggieruter tiouriotueroutoerutiuerteorituero tuioerutioeriotueroutoeruto eroturoetuoerutqe;ruqe; rty80yuto;eqotouyt4uyity 4iltyilytilryterutyertuyertuyert erut uerytierutyerutylerytelryltylert qerytuiertyileqrtyuqet</td>
                            <td>ioruturiotueorit eiortueriotuoeotiieruter tiouriotueroutoerutiuerteorituero tuioerutioeriotueroutoeruto eroturoeteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeuoerutqe;ruqe; rty80yuto;eqotouyt4uyity 4iltyilytilryterutyertuyertuyert erut uerytierutyerutylerytelryltylert qerytuiertyileqrtyuqet</td>
                            <td>ioruturiotueorit eiortueriotuoeotiieruter tiouriotueroutoerutiuerteorituero tuioerutioeriotueroutoeruto eroturoetuoerutqe;ruqe; rty80yuto;eqotouyt4uyity 4iltyilytilryterutyertuyertuyert erut uerytierutyerutylerytelryltylert qerytuiertyileqrtyuqet</td>
                        </tr>
                    </table>

                </div>

            </div>

        </div>

    </body>
</html>

OK, I think I understand. What should happen when the content is really wide? Should the Middle (red box) expand right to enclose the wide content? — Andrew, Sep 09 '11 at 15:15
Yeah which is obviously not possible if it has overflow hidden applied which is required to clear it from the left container. Overflow auto does not work in this case either as it makes the panel scrollable again something I'm trying to avoid. — Cameron, Sep 09 '11 at 15:35

CSS Float causes layout to break

1 Answers1