Arranging DIVs Horizontally

Working with DIV tag is always problem and hard work thats why many web developers avoid creating their websites in DIV tag, in this tutorial, I will show you how to arrange DIVs in horizontal order with CSS.

The HTML Code

This is the html code for 4 divs div.container, div.left, div.middle and div.right.
Note: Below the div.right there is another div with height:0; and width:100% and clear:both, the job of this div is to make sure the floating divs not going outside the container, try on your own to remove the div.clear to see what will happen on those floating div.

   <div class="container">
   <div class="left">Left</div>
   <div class="middle">Middle</div>
   <div class="right">Right</div>
   <div class="clear"></div>
   </div>

The CSS Code

.container{
width:600px;
padding:0;
border:5px solid #ddd;
margin:0 auto;
}

.left{
float:left;
width:150px;
height:300px;
text-align:center;
background:#4b471a;
font:18px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#1b1b1b;
}

.middle{
float:left;
width:300px;
height:300px;
text-align:center;
background:#a19c5a;
font:18px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#1b1b1b;
}

.right{
float:left;
width:150px;
height:300px;
text-align:center;
background:#4b471a;
font:18px Arial, Helvetica, sans-serif;
font-weight:bold;
color:#1b1b1b;
}

.clear{
clear:both;
height:0;
width:100%;
}

Output

By Mohd Zulkamal
NOTE : – If You have Found this post Helpful, I will appreciate if you can Share it on Facebook, Twitter and Other Social Media Sites. Thanks =)