Home Html How to align div side by side?
Questions:Ask|Latest

 
 

Share on Google+Share on Google+

How to align div side by side?

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

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 of the tutorial:

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

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: February 5, 2014

Related Tutorials

Ask Questions?    Discuss: How to align div side by side?  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com