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 in 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:

<div id="parent">
<div id="div1" class="div">Number 1</div>
<div id="div2" class="div">Number 2</div>
<div id="div3" class="div">Number 3</div>
</div>

Style them as in the following:

.div
{
    background-color:red;
    color:white;
    border: 1px solid;
}
#parent
{
    border:1px solid #ccc;
    text-align: center;
    height:150px;
    width:400px;
}

Then you can see output as in the following.

 

 

Now we will align those divs horizontally using pure CSS.

#div2
{
   display: inline;
}
#div3
{
    float:right;
}
#div1
{
float:left;
}

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 with another article.