Categories
CSS-Tutorial

CSS Tutorial on Two column DIV layout problem where container DIV collapses

Here container DIV has two child DIVs. Container DIV is relatively positioned. After container DIV a footer DIV BOX exists which also relatively positioned. Inside container DIV there exists two column DIVs which are absolutely positioned. Left colummn is of 60% width of container and right column is of 30% width.

Normally you will find that all correct in the CSS and HTML code, but when you see it in browser you will find out that Footer DIV will appear on container DIV.

I have added some background so that you can understand the DIVs. Here container has brown background (not in the following picture, see the link below) colour. Right column (inside container DIV) has GREEN background. Left column has light blue color background. Footer box has red background. The HTML & CSS code given below just after the following image.

But my target is the following layout. The wrapper div will grow with inner child divs.

Two column DIV layout inside wrapper DIV
Two column DIV layout inside wrapper DIV

The problem of broken two column DIV layout : You can see the following code running here, just click here and open it in browser.

  • The container doesnot wrap the inside DIVs till the end.
  • The footer should appear under container DIV, but it comes up.



The HTML and CSS Code given below-

<style type="text/css">
#container {
            position: relative;
            margin:0 auto;
            width: 1000px;
            background: #C63;
            padding: 10px;
            height:auto;
}

#leftCol {
            position: absolute;
            top:10px;
            left:10px;
            background: #e8f6fe;
            width: 60%;
}

#rightCol {
            position: absolute;
            top:10px;
            right:10px;
            width:30%;
            background: #aafed6;
}

.box {
            position:relative;
            clear:both;
            background:#F39;
}
</style>

<div id="container">
      <div id="leftCol">

            <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
      </div>
      <div id="rightCol">
            <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
      </div>
</div>

<div class="box">
<p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
</div>

The corrected code given below :

Here the right column will be positioned first. Then the left column. You will notice that the left column dont have float:left property. The output will look like this page.

Please read this tutorial : to know about two column div layout, when right column having fixed width and left column have fluid width.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
            <style type="text/css">
            #container {
                        position: relative;
                        margin:0 auto;
                        width: 1000px;
                        background: #C63;
                        padding: 10px;
                     }

            #leftCol {
                        background: #e8f6fe;
                        width: auto;
            }

            #rightCol {
                        float:right;
                        width:30%;
                        background: #aafed6;
            }

            .box {
                        position:relative;
                        clear:both;
                        background:#F39;
            }
            </style>
</head>

<body>
            <div id="container">
                        <div id="rightCol">
                                    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
                        </div>
                        <div id="leftCol">

                                    <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
                        </div>
               </div>

            <div class="box">
                        <p>Lorem ipsum dolor sit amet,consectetuer adipiscing elit. Phasellus varius eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Phasellus varius eleifend.</p>
            </div>

</body>
</html>