Mimoun
07-01-2005, 11:28 PM
Here I will explain how to make a vertical expandable and unbreakable css design without using tables.
We will be using the CSS attribute float.
A div layer can float left or right.
We will be using a 2 column design but you can do this with a 3,4 and more column too by just nesting one div in another.
first create the framework for the HTML file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertical expendable and unbreakable CSS design </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="central">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<div id="leftside">
<p>Test text test 1 2 3</p>
<p>Test text test 1 2 3</p>
</div>
<div id="rightside">
<p>Test text test 1 2 3</p>
<p>Test text test 1 2 3</p>
<p>Test text test 1 2 3</p>
</div>
<div id="footer">footer</div>
</div>
</div>
</body>
</html>
The first thing to make on your CSS file will be the to all standard settings for all elements on 0px.
* {margin:0px;padding:0px;top:0px;left:0px;}
than give your body a background color:
body{background-color:#CCCCCC;}
Now we will make a div that will be in the center of the screen.
It is important that you give this div the same background as your column that will be used on the left side and a background image that will be used for the column on the right side.
#central{
margin-right: auto;
margin-left: auto;
position: relative;
width: 780px;
text-align: left;
background-color: #FFFFFF;
background-image: url(background.gif);
background-repeat: repeat-y;
background-position: right top;
}
Now make a header:
#header{
background-color: #26618d;
height: 100px;
width: 780px;
left: 0px;
top: 0px;
}
And the leftside with a float left:
#leftside{
float: left;
width: 460px;
background-color: #fff;
}
and the rightside it's important that you set the backgound to transparnt as we will be using the background from the #central DIV
#rightside{
float: right;
width: 316px;
background-color: transparent;
}
And the footer very important set clear to both:
#footer{
clear: both;
background-color: #88a905;
position: relative;
height: 30px;
}
That's all you can download the code in the attachment.
If you have downloaded it try to add a lot of content in one of the columns and you will see that the design does not break but expands.
We will be using the CSS attribute float.
A div layer can float left or right.
We will be using a 2 column design but you can do this with a 3,4 and more column too by just nesting one div in another.
first create the framework for the HTML file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertical expendable and unbreakable CSS design </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="central">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<div id="leftside">
<p>Test text test 1 2 3</p>
<p>Test text test 1 2 3</p>
</div>
<div id="rightside">
<p>Test text test 1 2 3</p>
<p>Test text test 1 2 3</p>
<p>Test text test 1 2 3</p>
</div>
<div id="footer">footer</div>
</div>
</div>
</body>
</html>
The first thing to make on your CSS file will be the to all standard settings for all elements on 0px.
* {margin:0px;padding:0px;top:0px;left:0px;}
than give your body a background color:
body{background-color:#CCCCCC;}
Now we will make a div that will be in the center of the screen.
It is important that you give this div the same background as your column that will be used on the left side and a background image that will be used for the column on the right side.
#central{
margin-right: auto;
margin-left: auto;
position: relative;
width: 780px;
text-align: left;
background-color: #FFFFFF;
background-image: url(background.gif);
background-repeat: repeat-y;
background-position: right top;
}
Now make a header:
#header{
background-color: #26618d;
height: 100px;
width: 780px;
left: 0px;
top: 0px;
}
And the leftside with a float left:
#leftside{
float: left;
width: 460px;
background-color: #fff;
}
and the rightside it's important that you set the backgound to transparnt as we will be using the background from the #central DIV
#rightside{
float: right;
width: 316px;
background-color: transparent;
}
And the footer very important set clear to both:
#footer{
clear: both;
background-color: #88a905;
position: relative;
height: 30px;
}
That's all you can download the code in the attachment.
If you have downloaded it try to add a lot of content in one of the columns and you will see that the design does not break but expands.