Three Column Css

[mjahkoh]

Can someone please help me design a three column header. css is foreign language. maybe on a proportion of 60%,20%,20%

Regards

[algidDes702]

Something like this?

 

html code:

<div class="headerCont">
<div class="columns column1">
    	column 1
    </div>
    <div class="columns column2">
    	column 2
    </div>
    <div class="columns column3">
    	column 3
    </div>
    <div class="clear"></div>
</div>

 

css code:

<style type="text/css">
.headerCont {
width:1000px;
height:250px;
text-align:center;
margin-left:auto;
margin-right:auto;
}

.columns {
height:250px;
float:left;
}
.column1 {
width:60%;
background-color:#6FC;
}
.column2 {
width:20%;
background-color:#CC0;
}

.column3 {
width:20%;
background-color:#0F0;
}

.clear {
clear:both;
}
</style>

 

To get this to happen you have to use float and clear. When you float a div or element it looses its strict height and width that pushed surrounding elements into position, however if you clear the floats as in my .clear class then the elements gain their strict height and widths back.

 

thanks

 

algidDes523

[haku]

http://www.dynamicdrive.com/style/layouts/category/C10/