Home/ Questions/Q 6551673
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T12:21:59+00:00

If you copy the following HTML: http://pastebin.com/zBkzGysw into a text editor and test in

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0