Home/ Questions/Q 7655903
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T12:38:05+00:00

Can anyone explain to me this code because it seems to beat my logic?

  • 0

Can anyone explain to me this code because it seems to beat my logic?

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test CSS Lay 2 col, 1 fix 1 fluid</title>
<style type="text/css">
    body{
        background-color:#000;
        padding: 0;
        margin: 0;
    }
    #main{
        width:70%;
        min-width:300px;
        height:500px;
    }

    #colWr{
        width:100%;
        height:500px;
        float:left;
    }

    #col{
        height:inherit;
        background-color:#900;
        margin-left:200px;  
    }

    #left{
        height:inherit;
        background-color:#9C3;
        float:left;
        width: 200px;
        margin-left: -100%;
    }

</style>
</head>
<body>
<center>
<div id="main">
    <div id="colWr">
        <div id="col"></div>
    </div>
    <div id="left"></div>
</div>

</center>
</body>
</html>

My questions rely on the facts that #left holds a margin-left: -100px attribute, the position of the div’s within the main div suggest that the left column would rather be a right column and why is the “col” column floated to the left within the “colWr” div?

For a 1_fixed-1_liquid css layout, the code is quite a mind-twister.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The order of the divs doesn’t matter as colWr has a width of 100% which means anything floated after it will appear on a new line anyway, if the left column came first it would force the colWr column on to a new line and it would have to be given a negative margin. The left div has a negative margin of 100% which brings it back on top of colWr.

    As to why the page was laid out this way I have no idea, the same effect could be just as easily achieved by putting the left next to the col div and removing the colWr div (doesn’t do any harm but it serves no purpose).

    You should also note that the center tag in HTML has been deprecated and I recommend you give centre a div by specifying in it’s css margin: auto. The code also lacks a DOCTYPE declaration which is required to trigger standards mode in most browsers – you can find more information about browser modes here.

    My suspicion is that the code you have was written pre-dating the release of HTML 4.01. It will work in most browsers due to their legacy support but that doesn’t mean it works well, I wouldn’t use it. I would however use this:

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Test CSS Lay 2 col, 1 fix 1 fluid</title>
        <style type="text/css">
            body{
                background-color:#000;
                padding: 0;
                margin: 0;
            }
            #main{
                width:70%;
                min-width:300px;
                height:500px;
                margin: auto;
            }

            #col{
                height:inherit;
                background-color:#900;
                margin-left:200px;  
            }

            #left{
                height:inherit;
                background-color:#9C3;
                float:left;
                width: 200px;
            }
        </style>
    </head>
    <body>
       <div id="main">
            <div id="left"></div>
            <div id="col"></div>
       </div>
    </body>
</html>
    • 0