M
Mr Bean
Like that below.
Perfectly flexible, easy to use.
Any pro or con's?
-----------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</script><title>No title</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 100%;
background-color: silver;
/*text-align: center;*/
}
h1, h2, h3, h4 {
margin-top: 12px;;
margin-bottom: 3px;
margin-left: 8px;
font-size: 100%;
font-weight: bold;
color: #0C3865;
clear: both;
}
h2 {
font-size: 98%;
}
h3 {
/*padding-left: 20px;*/
font-size: 95%;
}
h4 {
margin-top: 2px;
padding-left: 2px;
margin-bottom: 2px;
font-size: 93%;
}
p {
display: block;
font-size: 83%;
padding-left: 10px;
margin-top: 2px;
/*text-indent: 1.2em;*/
text-align: left;
margin-bottom: 3px;
clear: both;
}
a, a:active {
font-size: 100%;
/*color: #C61000;*/
font-weight: bold;
color: #0C3865;
text-decoration: underline;
}
a:hover {
text-decoration: underline;
color: #C61000;
}
a:visited {
color: #2c608e;
}
#head {
position: absolute;
top: 0px;
left: 0px;
height: 120px;
width: 100%;
background-color: #FFFFEE;
background-image: url("../img/head_bg01.jpg");
background-repeat: repeat-x;
border: 1px solid #000000;
}
#leftcol {
position: absolute;
top: 123px;
left: 0px;
width: 189px;
border-right: 5px solid #000000;
background-color: #CCBBDD;
}
#rightcol {
position: absolute;
top: 123px;
right: 0px;
width: 181px;
border-left: 5px solid #000000;
background-color: #AACCEE;
}
#end {
clear: both;
margin-top: 2px;
border-top: 3px solid #A1BBE4;
text-align: center;
font-size: 100%;
font-weight: normal;
color: #0C3865;
padding-top: 5px;
background-color: #CCCCFF;
}
..central {
margin-top: 123px;
margin-left: 189px;
margin-right: 182px;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div id="head">
<h1>Main heading</h1>
</div>
<div id="leftcol">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. </p>
<p> </div>
<div class="central">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. </p>
</div>
<div id="rightcol">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. </p>
</div>
</body>
</html>
Perfectly flexible, easy to use.
Any pro or con's?
-----------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</script><title>No title</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Verdana, sans-serif;
font-size: 100%;
background-color: silver;
/*text-align: center;*/
}
h1, h2, h3, h4 {
margin-top: 12px;;
margin-bottom: 3px;
margin-left: 8px;
font-size: 100%;
font-weight: bold;
color: #0C3865;
clear: both;
}
h2 {
font-size: 98%;
}
h3 {
/*padding-left: 20px;*/
font-size: 95%;
}
h4 {
margin-top: 2px;
padding-left: 2px;
margin-bottom: 2px;
font-size: 93%;
}
p {
display: block;
font-size: 83%;
padding-left: 10px;
margin-top: 2px;
/*text-indent: 1.2em;*/
text-align: left;
margin-bottom: 3px;
clear: both;
}
a, a:active {
font-size: 100%;
/*color: #C61000;*/
font-weight: bold;
color: #0C3865;
text-decoration: underline;
}
a:hover {
text-decoration: underline;
color: #C61000;
}
a:visited {
color: #2c608e;
}
#head {
position: absolute;
top: 0px;
left: 0px;
height: 120px;
width: 100%;
background-color: #FFFFEE;
background-image: url("../img/head_bg01.jpg");
background-repeat: repeat-x;
border: 1px solid #000000;
}
#leftcol {
position: absolute;
top: 123px;
left: 0px;
width: 189px;
border-right: 5px solid #000000;
background-color: #CCBBDD;
}
#rightcol {
position: absolute;
top: 123px;
right: 0px;
width: 181px;
border-left: 5px solid #000000;
background-color: #AACCEE;
}
#end {
clear: both;
margin-top: 2px;
border-top: 3px solid #A1BBE4;
text-align: center;
font-size: 100%;
font-weight: normal;
color: #0C3865;
padding-top: 5px;
background-color: #CCCCFF;
}
..central {
margin-top: 123px;
margin-left: 189px;
margin-right: 182px;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<div id="head">
<h1>Main heading</h1>
</div>
<div id="leftcol">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. </p>
<p> </div>
<div class="central">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum. </p>
</div>
<div id="rightcol">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis
aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. </p>
</div>
</body>
</html>