How to align two divs horizontally in HTML by using CSS
X

Congrats, You are Subscribed to Receive Updates.

How to align two divs horizontally in HTML by using CSS


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.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts