Using the DIV tag to display columns rather than tables Rumi, November 15, 2013 The TABLE element may be a convenient way of producing stable layouts, but the W3C WAI guidelines are pretty clear that tables are for displaying tabular information, not for arranging page content. The DIV element is used as the basic layout element as it does not add any extra meaning to semantic mark-up. With a bit of CSS you can position it and size it pretty much anyway you want. A basic set of columns The basic technique is shown by the columns below: These columns have been created by wrapping three DIV elements into one container DIV. The container has its width set to 900 pixels and each column is set to 300 pixels wide. In order to make the columns line up you need to set the float style of each column DIV to left. The HTML below shows how this is arranged in simple mark-up. <div class="columns"> <div class="red" >Column 1</div> <div class="grey">Column 2</div> <div class="red" >Column 3</div> </div> <div class="clear"></div> When calculating the columns size, take into account any padding and borders as they are included in the width of the column. For example, a column that is 150px wide with padding of 5px and a border of 1px should be set to 144px wide. Margins are added to the outside, so a 10px margin will make the same column run to 160px. Here are the styles: div.columns { width: 900px; } div.columns div { width: 300px; height: 100px; float: left; } div.grey { background-color: #cccccc; } div.red { background-color: #e14e32; } div.clear { clear: both; } Note that there is a final DIV element where the clear style has been set to both. This effectively “re-sets” the layout after the floating columns so any further elements won’t try and line up with your last column. Using a grid Most layouts require more flexibility than a fixed set of columns, so a grid system is often adopted. This allows a page to be based on a more flexible set of styles. The example below shows a grid composed of three different types of column. The HTML is pretty straightforward: <div class="grid"> <div class="col100 red">100 pixels</div> <div class="col200 grey">200 pixels</div> <div class="col300 red">300 pixels</div> <div class="col100 grey">100 pixels</div> <div class="col200 red">200 pixels</div> </div> <div class="clear"></div> As are the styles: div.grid { width: 900px; } div.grid div { float: left; height: 100px; } div.col100 { width: 100px; } div.col200 { width: 200px; } div.col300 { width: 300px; } div.grey { background-color: #cccccc; } div.red { background-color: #e14e32; } div.clear { clear: both; } Aligning columns to the centre of the page Most column-based layouts use a fixed width that is centred on the page. This can be done by manipulating the text alignment of a containing DIV element but is more commonly achieved through the margin style of the content DIV. If you set this to auto then browsers will automatically line up the content in the middle. The example below shows a simple two-column DIV element that is centred in a container: The HTML shows how the DIV elements are arranged: <div class="centered"> <div class="columns"> <div class="red" >Column 1</div> <div class="grey">Column 2</div> </div> <div class="clear"></div> </div> The styles will be pretty familiar, save for the extra margin attribute. div.centered { width: 900px; } div.columns { width: 600px; margin: 0 auto;} div.columns div { width: 300px; height: 100px; float: left; } div.grey { background-color: #cccccc; } div.red { background-color: #e14e32; } div.clear { clear: both; } Src: http://www.ben-morris.com/using-the-div-tag-to-display-columns-rather-than-tables Related Scripts DIVHTML
Submit Once- Form Validation Javascript July 23, 2008 If you have forms on your site, you know they are extremely prone to abuse by users. Apart from incomplete or bogus entries, the most common offense is duplicate submissions by the same individual, caused by pressing the “Submit” button over and over and over again. Well, this DHTML script… Read More
Bash Script To Restart Linux Server Services December 21, 2021 Here’s the command line code to create the file in nano: sudo nano /opt/launch-crashed-services.sh Here is the bash script. #!/bin/bash service mysql status | grep ‘active (running)’ > /dev/null 2>&1 if [ $? != 0 ] then sudo service mysql restart > /dev/null fi service nginx status | grep ‘active… Read More
Horizontal CSS menu August 16, 2009 1. Let’s begin! Create a new HTML document and save it as cssmenu.html. Although is better to put the CSS code in a external style sheet, in this tutorial we will put the whole CSS code in the HTML file to be easier to follow by readers. Related Read More