CSS-Floating DIVs
This tutorial is related to CSS layout techniques. If you seek something like the following, then this tutorial might be useful to you.
Your body1 text here.
Your body2 text here.
Your body3 text here.
Open Notepad or your plain text editor software and type/copy&paste the following HTML code:
Snippet 1
<div class="box_container">
<div class="box_header">Simple Div-ing</div>
<div class="box_content">
-
<div class="panel1s">
<div class="panel1_sub">
Your body text here.
</div><!--End panel1_sub -->
</div><!--End panel1 -->
<div class="panel2s">
<div class="panel2_sub">
Your body text here.
</div><!--End panel2_sub -->
-
</div><!--End pane2s -->
-
<div class="panel3s">
<div class="panel3_sub">
Your body text here.
</div><!--End panel3_sub -->
-
</div><!--End panel3s -->
</div><!--End box_content -->
<div class="box_footer"> © You!</div>
</div> <!--End of box_container-->
Here's the CSS styling
Snippet 2
-
*{/*This is optional, I like to remove all browser
default settings and then add my own later.*/ margin:0; padding:0;
-
}
-
.box_container{ /*Once you give this a defined width, you can also add
margin: auto auto; to centre the container*/ width: 400px;
-
color: #fff;
font-family:Arial, Helvetica, sans-serif;
-
font-size:12px;
}
.box_header{
-
background:#003333;
text-align: center;
-
}
-
.panel1s, .panel2s, .panel3s{
float: left;
-
width: 133px;
margin:auto auto;
-
}
-
.panel1s{
background: #336600;
-
}
-
.panel2s{
background:#FF6600;
-
}
-
.panel3s{
background: #663399;
-
width: 134px; /*Over writes previous 133px width so that the panel
meets the edge of the box_container*/ }
.panel1_sub, .panel2_sub, .panel3_sub{
-
padding: .3em .3em;
width: 100px;
-
margin:auto auto;
}
.box_footer{
-
/* clear: both; drops the div below the floating ones. You could have just used clear: left; but this only clears divs floating to the left, which is what we need, but if you added a div to float right, then you wouldn't have to worry about editing the code. clear:both; clears the DIV in question from all previously floating divs.*/
-
clear:both;
background:#000033;
-
text-indent: 10px;
}
You would have noticed that I added .panel#s_sub divs to the .panel#s and none for the .box_header and .box_footer, you are allowed to add more sub/nested divs. I only did for demonstration purposes, sub/nested divs allows you to format inside text and the like without messing with the main structure. In the example, I gave the .panel#_sub paddings, which would keep the text and any other elements away from the edges.
If you wanted to keep spacing between your panels, then you could have just given your .panel2s, and .panel3s margin-left (or margin-right) settings. Whenever you add margins, you must also consider your widths of your floating divs, any panel that breaks beyond the container will drop. Let's say you added a margin-left: 40px; to .panel2s, then this would push .panel3s to the edge, once .panel3s passes the boundering width of the .box_container, it will no longer float next to it's previous brother, en otras palabras, .panel3s will drop! So therefore, the wrapping container, in this tutorial .box_container, should have a width large enough to contain its child DIVs/panels.
The limits are endless with what you can do. Hopefully this tutorial gives you ideas on how to take things further. Ofcourse, your own site would have larger widths, the demonstrated one is just small to fit neatly in this page. 
For additional info, it is important that you give your main container (in this tutorial it's .box_container) a fixed width, because if a user toggles with the window size, making the window size smaller than the size of your panel containers, then you will notice that the panels will drop, and you'll lose your float:left; effect. So do remember, that floating divs need fixed width properties, and by fixed I mean don't use width: auto or width: xxx%, use px units or so.
Cheers.