How to align div side by side?

Learn How to align div side by side in HTML page using CSS.

How to align div side by side?

Example of aligning DIV side by side in HTML page

In this tutorial I will explain you how you can align the div side by side using CSS.

The CSS is great way for designing you website. Web designers are using CSS to design latest website and web applications. One of the most asked question is How to align div side by side?. If you are looking for the tutorial for aligning the DIV side by side using the CSS then then tutorial is for you.

In this video tutorial we have showed you how to align the DIV.

Actually we will first create a container DIV and then put any number of DIV inside the container div and using CSS all these div's get aligned side by site.

Here is the code of the CSS:

  <style>
	.container{
		width:500px;
		height:500px;
		background:#d3d3d3;
	}
	.floatingDiv{
		float:left;
		width:100px; 
		height:90px;  
		margin:5px;
	}
  </style>

In the above CSS we have use the float:left; property to align the DIV's side by side.

Here is the video tutorial of "Aligning DIV Side by Side":

Here is the complete code of the program:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>Align Div side by side</TITLE>
  <style>
	.container{
		width:500px;
		height:500px;
		background:#d3d3d3;
	}
	.floatingDiv{
		float:left;
		width:100px; 
		height:90px;  
		margin:5px;
	}
  </style>
 </HEAD>

 <BODY>
  
<div class="container">

	<div class="floatingDiv" style="background:#FF0000;">
		<p>1</p>
	</div>

	<div class="floatingDiv" style="background: #FF7F00;">
		<p>2</p>
	</div>

	<div class="floatingDiv" style="background:#FFFF00;">
		<p>3</p>
	</div>

	<div class="floatingDiv" style="background:#00FF00;">
		<p>4</p>
	</div>

	<div class="floatingDiv" style="background:#0000FF;">
		<p>5</p>
	</div>

	<div class="floatingDiv" style="background:#4B0082;">
		<p>6</p>
	</div>

	<div class="floatingDiv" style="background:#8F00FF;">
		<p>7</p>
	</div>
	<div class="floatingDiv" style="background:magenta;">
		<p>8</p>
	</div>

	<div class="floatingDiv" style="background:green;">
		<p>9</p>
	</div>
	
</div>

 </BODY>
</HTML>