Post
Ask Question

Align DIV Horizontally Using CSS

Introduction

 
Today we will learn how to align HTML DIV elements horizontally using normal CSS styles. I hope you will like this small demo.
 
Please see this article on my blog here.
 
Background
 
In our daily programming life, we are all familiar with DIV elements used in most client-side coded web applications. So it is important that we style them well. This article shows how to align those DIV elements horizontally.
 
Using the code
 
Create the UI elements as in the following:
  1. <div id="parent">  
  2. <div id="div1" class="div">Number 1</div>  
  3. <div id="div2" class="div">Number 2</div>  
  4. <div id="div3" class="div">Number 3</div>  
  5. </div>  
Style them as in the following:
  1. .div  
  2. {  
  3.     background-color:red;  
  4.     color:white;  
  5.     border: 1px solid;  
  6. }  
  7. #parent  
  8. {  
  9.     border:1px solid #ccc;  
  10.     text-align: center;  
  11.     height:150px;  
  12.     width:400px;  
  13. }  
Then you can see output as in the following.
 
 
Now we will align those divs horizontally using pure CSS.
  1. #div2  
  2. {  
  3.    display: inline;  
  4. }  
  5. #div3  
  6. {  
  7.     float:right;  
  8. }  
  9. #div1  
  10. {  
  11. float:left;  
  12. }  
Now shall we see the output?
 
 
You can see a JSFiddle demo here. Please go ahead and try your experience now. 
 
That is all for now. I will see you soon in another article.


Similar Articles