Modéle de site CSS 3 colonnes fixes
Référençé par Scripts Free on septembre 7th, 2007
Vous pouvez le modifier à volonté
* à plaçer entre les balises <body> </body>
Style CSS :
<style type=”text/css”>
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 840px; /*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: -840px; /*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;
}
</style>
Source html :
<body>
<div id=”maincontainer”>
<div id=”topsection”><div class=”innertube”><h1>CSS Layout - 3 colonnes fixes</h1></div></div>
<div id=”contentwrapper”>
<div id=”contentcolumn”>
<div class=”innertube”><b>Contentu</b>
<script type=”text/javascript”>
filltext(10)
</script>
</div>
</div>
</div>
<div id=”leftcolumn”>
<div class=”innertube”><b>Left Column: <em>200px</em></b> <script type=”text/javascript”>filltext(20)</script></div>
</div>
<div id=”rightcolumn”>
<div class=”innertube”><b>Right Column: <em>200px</em></b> <script type=”text/javascript”>filltext(15)</script></div>
</div>
<div id=”footer”><a href=”http://scripts.buddapass.com/css_layouts” title=”css , layouts , free , gratuit , telechargement , gabarit de site , modeles de mise en page”>Scripts CSS</a></div>
</div>
</body>