Aligning divs next to each other !

Context:

Since the dawn of the tableless design (css & divs), often frustration has been felt in not being able to (in the beginning at least !) place objects as desired…. in comparison to when using tables. Among the difficulties realised, has been the ability to place div elements next to each other, horizontally.

Solution :

The solution is actually much simpler than anticipated, and can be broken down in two parts :-

1) Placing the divs next to each other, and
2) trying to confine text to only it’s respective div and not overflowing into the next.

Part 1: To define a width and then to make use of the css ‘float’ property, as follows…

.div
{
   width: 50px;
   float: left;
   ...
}

Part 2: To make use of the css ‘overflow’ property. (Defining all the possible options is outside the scope of this article, please refer to a css reference such as W3 Schools.) As follows…

.div
{
   width: 50px;
   float: left;

   overflow: auto;
}

… where ‘auto’ ensures that if text is cut-off, a scroll bar can be used to view the cut-off part. Additionally, IE users could make use of ‘word-wrap’ as follows…

.div
{
   width: 50px;
   float: left;

   overflow: auto;

   /* IE only */
   word-wrap: break-word;
}

Please note the ‘.’ instead of the regular ‘#’ for the div definition. This is because, we are defining a class that may be reused by several divs. So the html element will use the above with a ‘class’ and not an ‘id’.. As follows…

<div class="div">
   first div
</div>
<div class="div">
   second div
</div>

… That’s all there is to it !

Wa Allahu A’lam.