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
PHP Code:
<!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.
HTML Code:
* {margin:0px;padding:0px;top:0px;left:0px;}
than give your body a background color:
HTML Code:
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.
HTML Code:
#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:
HTML Code:
#header{
background-color: #26618d;
height: 100px;
width: 780px;
left: 0px;
top: 0px;
}
And the leftside with a float left:
HTML Code:
#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
HTML Code:
#rightside{
float: right;
width: 316px;
background-color: transparent;
}
And the footer very important set clear to both:
HTML Code:
#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.