Apr19

Written by:David Aldridge
4/19/2011 3:37 PM 

If you want ot place DIVs side by side like columns then, you have to use the float: style element and the margin: style element.

The floats allow the divs to line up as columns, whilst the margins allow you to put some space between them as needed.

The only difficult part is that you have to finish it off with a div using the clear: element to make sure that the next block after the columns actually does start below them and not to the side of them.

So the final code looks like:

<div id="container">
  <div id="col1" style="float:left; margin:10px;">
    Column 1
  </div>
  <div id="col2" style="float:left; margin:10px;">
    Column 2
  </div>
  <div id="col3" style="float:left; margin:10px;">
    Column 3
  </div>
  <div id="clearance" style="clear:both;"></div>
</div>


 

Tags:

Your name:
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
Enter the code shown above in the box below
Add Comment  Cancel 
You must be logged in and have permission to create or edit a blog.