Category Archives: HTML

CSS: How to create a three column layout without tables

In modern web design the use of tables got a bit outdated recently since they render slow and therefore do not contribute to a positive user experience. To everybody who is used to design his web projects with tables this might be annoying. However, CSS shows an easy way out here. You simply can mimic the behaviour of a table using division elements which contain each other in combination with CSS style sheets. The following example illustrates how this works. We want to reach the following requirements.

  • The page shall be divided in three colums
  • The central colum will have a fixed width
  • The remaining columns adapt their width dynamically

This layout can be very usefull if you want to see your content centred on the screen while the remaining white space is used for ads. The following code sample does exactly what has been required above:

<html>
<head>
<style type="text/css">
.container {
    float: left;
    width: 100%;
}

.columnLeft{
    width: calc(50% - 490px);
    float:left;
}

.columnCenter{
    width: 980px;
    float:left;
}


.columnRight{
    width: calc(50% - 490px);
    float:left;
}
</style>
</head>
<body>
<div class="container">
<div class="columnLeft">
&nbsp;  
</div>
<div class="columnCenter">
Central Column
</div>
<div class="columnRight">
Right Column
</div>
</body>
</html>



To calculate the width in CSS dynamically the calc() function is used. It allows also to subtract a width in pixels from a width in percent. In case you want to have a empty column you should add a space like in the example, otherwise it will not render properly in some web browsers.