How to align div side by side?

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

Ads

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>

Advertisements

Ads
Share on Google+Share on Google+

How to align div side by side?

Posted on: February 5, 2014 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Advertisements

 

Discuss: How to align div side by side?  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments:0

Ads

 

Ads