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…
Hello, thanks for visit and comment on my blog, your blog is very good, I always visit now. have a nice day and a great weekend. bjs. my blog http://sensuaisegatas.blogspot.com