CSS columns
Creating columns using CSS
Using CSS you can make a multiple columned layout. This can be done by creating a column, giving it a size and making all the other text wrap around it.
<body>
<div id="container">
<div id="left">Text for column 1</div>
<div id="right">Text for column 2</div>
<div id="spacer"></div>
</div>
…The container div is used to encapsulate the columns and can be used to set the overall size of both columns. Two div elements are used for the left and right content. We now need to add styles to the elements, this is easy because we gave an id to each element. The spacer is there to make sure that the content around the columns does not interfere with it.
<head>
<style type="text/css">
<!--
#left
{
float: left;
width: 250px;
margin-right: 10px;
}
#right
{
float: left;
width: 250px;
}
#spacer
{
clear:both;
}
-->
</style>
…#container
{
width: 520px;
}Fluid columns
The columns used above has a fixed size specified in pixels, this size can also be specified as a percentage of the screen width so that the columns resize to match the size of the browser window. The HTML is the same as before but the width is specified differently.
#left
{
float: left;
width: 49%;
margin-right: 2%;
}
#right
{
float: left;
width: 49%;
}
#spacer
{
clear:both;
}Three or more columns
More columns can be added easily as they are simply ‘floated’ left like the others.
<div id="container">
<div id="left">Text</div>
<div id="middle">Text</div>
<div id="right">Text</div>
<div id="spacer"></div>
</div>This example has three columns, and the width can either be fluid or fixed.
#left, #middle
{
float: left;
width: 250px;
margin-right: 10px;
}
#right
{
float: left;
width: 250px;
}
#spacer
{
clear: both;
}
#container
{
width: 800px;
}