In this tutorial I will show you how you can force two or more div's to be on the same line without any form invalid XHTML/CSS appied. This tutorial is a must if you have features like top bars on your website!

Step 1: Creating the two Div Classes

When ever you place two div's next to each other you automatically get a line break that forces the following div's a line below, this can get annoying say if you want a row of divs on the same line!

Example:

<div id="something">Content</div>
<div id="random">More Content</div>

If you were to place this within a website you will notice that a automatic 1 line gap is present after the first div. But did you know you can stop from happening? Yes you can, but we'll need to create 2 Div classes first.

If you are using a global stylesheet for your site and want to apply this to it, I'd suggest you go ahead and modifiy your main style sheet. If your doing this to test it then I'd suggest simply adding it to the head tags of your XHTML document (No need to create a whole CSS document for such a small hack)

Our first Div Class:

.alignleft { float: left; }

This will display content to the left of our screens

Our Second Div class:

.alignright { float: right; }

This will display content to the right of our screens.

How does this work? Simply by using the float attribute the forced line break is stopped.

Step 2: Applying it in XHTML:

For this hack to work you must always have one of the two classess included in your code. Without these classes your hack will fail. Here's how you would go about including it in your div's:

<div id="something" class="alignleft">Content</div>
<div id="random" class="alignleft">More Content</div>
<div id="something2" class="alignright">Content</div>
<div id="random2" class="alignright">More Content</div>

The first two div's will be on the left and two other divs will be on the right but all on the same line! This sneaky little hack is great for using on Top-bars like the one at the top of your screen now! I gave you basic code for hack, you can also added in such attributes such as margins and padding to make your div's look presentable and not all squashed up.

Taking note:
You do not have to use this within in a div. It can be also used in the anchor tag etc, as long as you add in the class="alignleft"> part into your non div tag. However it is recommended that if you are using it within a div, you define a width.