Membership Membership:
Latest New User Latest: vpros
Past 24 Hours Past 24 Hours: 0
Prev. 24 Hours Prev. 24 Hours: 0
User Count Overall: 137

People Online People Online:
Visitors Visitors: 11
Members Members: 0
Total Total: 11

NakedMCSE Computer Tech Support Forums

So you have passed all of the exams and you are now out in the real world of windows servers, linux servers and freebsd servers faced with a tech support problem you have never seen before...

Find free online tech support in the forums below, respecting that advice is free, but work beyond advice is not...

The General forum is provided for off topic discussion.

You need a user account to post - please Register or Login.

Online Tech Support Forums
  Forum  Discussions  General  Side by side (column style) DIVs
Previous Previous
Next Next
New Post 4/19/2011 4:29 PM
119 posts
10th Level Poster

Side by side (column style) DIVs 

In order to make this work, 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 slightly non intuitive 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 would look like:

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


Previous Previous
Next Next
  Forum  Discussions  General  Side by side (column style) DIVs
Send me One Million FREE Guaranteed Visitors