How to align two divs horizontally in HTML by using CSS
- Article
- Comment
How to align two divs horizontally in HTML by using CSS. Several situations we need to set more than one div or any HTML components . So here I have some explanations to make ot horizontally with the help of css. Let’s start writing codes, whenever we start making we need to add a wrapper or container to put all the things inside it. So create a container or wrapper div with 100% width or enough width by setting values in pixel or inches.
Than place the two divs inside it as like the following one.
<div id="wrapper"> <div id="first-div" > First div content here... </div> <div id="second-div" > Second div content here... </div> </div>
So in our above example we created two divs inside the wrapper div. Now we need to write css property to make it work on properly. The following one is ur CSS code to make it aligned center.
#wrapper {
width:100%;
margin : 0;
}
#first-div {
width:50%;
margin : 0;
float : left ;
}
#second-div {
width:50%;
margin : 0;
float : left ;
}
This will make it horizontally, and use the clear both to avoid alignment issues
Just place the following code just before the end of wrapper div.
<div style="clear: both;" > </div>
That’s it.
