It has been advocated many times that tables shouldn't be use in HTML for layout purposes", and table should be only used for data display. That's why I leaned bit by bit to tableless layout for serasera. Basing myself on what is explained in http://www.w3.org/2002/03/csslayout-howto I tried to create my 3/2 collumns layout for namana.serasera.org
I've tested it on Firefox 1.0.7 and IE 6.0. Comments and suggestions are welcome.
This is the code.
<style type="text/css">
<!--
body {
text-align: center;
padding: 10px 0 10px 0;
}
*>html body,*>html td,*>html th body.fixedwidth{font-size:11px}
#nav {
width: 160px;
float: left;
margin-left: 5px;
}
#wrapper{
width: 780px;
text-align:left;
}
#content {
width: 600px;
float: right;
top: 0px;
margin: 5px;
}
#head {
clear: both;margin:0;padding:0 0 .5em 0;
}
#leftblock {
width: 410px;
float: left;
margin: 2,5px;
padding: 0;
}
#rightblock{
width: 180px;
float: right;
margin: 2,5px;
padding: 0;
}
#foot {
clear: both;
margin:0px;
padding:0 0 .5em 0;
}
-->
</style>
<div id="wrapper">
<div id="head">
head
</div>
<div id="nav">
nav
</div>
<div id="content">
<div id="leftblock">
left (or main)
</div>
<div id="rightblock">
right
</div>
</div>
<div id="foot">
foot
</div>
</div>
I've tested it on Firefox 1.0.7 and IE 6.0. Comments and suggestions are welcome.
This is the code.
<style type="text/css">
<!--
body {
text-align: center;
padding: 10px 0 10px 0;
}
*>html body,*>html td,*>html th body.fixedwidth{font-size:11px}
#nav {
width: 160px;
float: left;
margin-left: 5px;
}
#wrapper{
width: 780px;
text-align:left;
}
#content {
width: 600px;
float: right;
top: 0px;
margin: 5px;
}
#head {
clear: both;margin:0;padding:0 0 .5em 0;
}
#leftblock {
width: 410px;
float: left;
margin: 2,5px;
padding: 0;
}
#rightblock{
width: 180px;
float: right;
margin: 2,5px;
padding: 0;
}
#foot {
clear: both;
margin:0px;
padding:0 0 .5em 0;
}
-->
</style>
<div id="wrapper">
<div id="head">
head
</div>
<div id="nav">
nav
</div>
<div id="content">
<div id="leftblock">
left (or main)
</div>
<div id="rightblock">
right
</div>
</div>
<div id="foot">
foot
</div>
</div>
Commentaires