It is easy to make layout with table. Just drag and drop from the tools or code html directly. I like to make it using DIV and CSS.
First make 2 files of HTML and CSS. (I like to separate HTML and CSS files to make my web clear).
First make HTML with 1 div and 3 divs inside it.
<html>
<head>
<title> Column layout using CSS</title>
</head>
<body>
<div class=”container”>
<div class=”left”> Hello column left</div>
<div class=”center”> Hello column center</div>
<div class=”right”>Hello column right</div>
</div>
</body>
</html>
And the CSS is :
div.container
{
overflow:hidden;
height:100%;
}
div.container div
{
padding-bottom: 30000px;
margin-botton:-30000px;
}
div.left
{
float:left;
background-color:yellow;
}
div.center
{
float:left;
padding-left:5px;
}
div.right
{
float:right;
background-color:pink;
}
You can add many lines on columns and the height on left, center and right are increase and have equal height.
You can specify the column height by changing the css of div.container heights value to xxx px. If the line you add more than the specified height, it will crop.
