How To Align Two Boxes using CSS!

We are writing this article for the alignments of two boxes using css. We hope this article will be useful for those want to align the boxes in similar way.  Top- bottom, left –right, and together. We have used the FLOAT property to align these boxes. This is very easy….

Method1 …Top-Bottom

Just copy and paste the following code into your css file , only need to change name of id according to your requirement.. Then you will see two boxes aligned like this… We have used #box1 and #box2 as their id name

The name of the css file is xyz.css

#box1 {

position:relative;

height:50px;

width:500px;

margin: 0px 0 0 90px;

border-style: groove;

border-color: red;

}

#box2 {

position:relative;

height:50px;

width:200px;

border-style: groove;

border-color: pink;

}

You can also see more detail for css positioning in article “Css Positioning Tips And Tricks.”

Method 2  Left and Right

#lbox1 {

position:relative;

height:50px;

width:200px;

margin: 0px 0 0 90px;

border-style: groove;

border-color: red;

float: left;

}

#box2 {

position:relative;

height:50px;

width:200px;

border-style: groove;

border-color: pink;

float : left;

}

It will show output like…

Method3

If you wanted to place these boxes together simply change the right margin of Box1 or left margin of  Box2.

#box1 {

position:relative;

height:50px;

width:200px;

margin: 0px 0 0 90px;

border-style: groove;

border-color: red;

float: left;

}

#box2 {

position:relative;

height:50px;

width:200px;

margin: 0px 0 0 90px;

border-style: groove;

border-color: pink;

float : left;

}

Output will be like this…

We hope these methods will work for you.. Good Luck…