CSS Fixed Layout

Now, we will create a fixed type layout using css.

CSS Fixed Layout - (Fixed-Fixed-Fixed) Width-600px

Content Column: Fixed

Left Column: 180px
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

Right Column: 190px
This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version any later version.

Tech Altum

To Do this, start write following code on HTML Page,

<!--    **********   Code Ends Here    ********    -->
<div id="maincontainer">

<div id="topsection">
<div class="innertube">
<h1>CSS Fixed Layout - (Fixed-Fixed-Fixed) Width-1000px</h1>
</div>
</div>



<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> </div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>180px</em></b><br>
<p>This program is free software; you can redistribute it and/or modify it under the terms of the GNU General
Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option)
any later version.</p>
</div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>190px</em></b><p>This program is free software; you can redistribute it and/or modify it under the terms of the GNU General
Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option)
any later version any later version.</p> </div>
</div>

<div id="footer"><a href="http://www.techaltum.com">Tech Altum</a></div>

</div>
<!--    **********   Code Ends Here    ********    -->

Now start writing following css into it.

<!--    **********   CSS Starts Here    ********    -->

b{font-size: 110%;}
em{color: red;}

#maincontainer{
width: 1000px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin: 0 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -1000px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

<!--    **********   CSS Ends Here    ********    -->

Save this on a webpage and run, you will see a FIXED CSS LAYOUT