Floating divs

Tables are a thing of the past, we all should be fluent in div. Floating divs are part of our daily lives.

We know how to make two divs float side by side, simply float one to the left and the other to the right.

But we often need three(or more) divs to float side by side. You can see this type of design in magazine style website, it is used often across websites. View example website

Firstly make sure your three divs will fit into your containing divs width. Then make all three divs float left. It's as easy as that. The last div will dropdown to below the rest if your widths are too much.

Here is the css:

.container {
	width: 720px;
}

.column1 {
	width: 200px;
	float: left;
	height: 200px;
}

.column2  {
	width: 200px;
	float: left;
	height: 200px;
	margin-left: 35px;
}

 
.column3 {
	width: 200px;
	float: left;
	height: 200px;
	margin-left: 35px;
}

Now you can play around with the spacing(margin) and the widths, your columns don't have to be the same widths.

HAPPY CODING :)