Sunday, October 29, 2006

3 column format pure CSS

This section is the style

body{min-width: 630px;}
#container{padding-left:200px;padding-right:150px;overflow:hidden;}
#container .column{position:relative;float:left;padding-bottom:2010px;margin-bottom:-2000px;}
#center{width:100%;background-color:#ECECEC;color:gray;}
#left{width:200px;right:200px;margin-left:-100%;background-color:whitesmoke;}
#right{width:150px;margin-right:-150px;background-color:whitesmoke;}
* html #left{left:150px;}
#centerfloatleft{float:left;padding-right:5px;position:relative;}
.mainImage{border:1px dashed gray;width:300px;height:300px;}
.mainPersonalNotes{width:300px;}


This next section is the HTML markup



<div id="container">
<div id="center" class="column">
<div id=centerfloatleft>
<div class=mainImage> </div>
<div class="mainPersonalNotes">Notes</div>
</div>
Ingredients and Directions
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>

No comments: