3 columns, all fluid : three Columns « Layout « HTML / CSS
- HTML / CSS
- Layout
- three Columns
3 columns, all fluid
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style type="text/css">
#mainright {
width:33%;
float:left;
background:#aaa;
padding-bottom:10px;
}
#maincenter {
width:34%;
float:left;
background:#bbb;
padding-bottom:10px;
}
#mainleft {
width:33%;
float:left;
background:#ccc;
padding-bottom:10px;
}
#banner {
background:#ddd;
}
</style>
</head><body>
<div id="banner"><h1>3 columns, all fluid</h1></div>
<div id="mainleft">
<h1>mainleft</h1>
<p>this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
</p>
</div>
<div id="maincenter">
<h1>maincenter</h1>
<p>this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>
</div>
<div id="mainright">
<h1>mainright</h1>
<p>this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
</p>
</div>
</body>
</html>
Related examples in the same category