Home » CSS

CSS - Make Two DIVs Left and Right Aligned inside Main DIV

In this style, we will learn how to make two DIVs Left and Right Aligned inside a Main DIV using CSS.

CSS Code Snippet - Make Two DIVs Left and Right Aligned inside Main DIV

CSS

<style>
	.outerDiv
	{
		background-color: #006699;
		color: #fff;
		height: 400px;
		width: 600px;
		margin: 0px auto;
		padding: 5px;
	}
	.leftDiv
	{
		background-color: #efefef;
		color: #000;
		height: 400px;
		width: 48%;
		float: left;
	}
	.rightDiv
	{
		background-color: #efefef;
		color: #000;
		height: 400px;
		width: 48%;
		float: right;
	}			
</style>

HTML Source Code with CSS

<!--CSS - Make Two DIVs Left and Right Aligned inside Main DIV.-->
<html>
	<head>
		<title>CSS - Make Two DIVs Left and Right Aligned inside Main DIV.</title>
		<!--Example CSS-->
		<link href="ExampleStyle.css" type="text/css" rel="stylesheet"/>
		<style>
			.outerDiv
			{
				background-color: #006699;
				color: #fff;
				height: 400px;
				width: 600px;
				margin: 0px auto;
				padding: 5px;
			}
			.leftDiv
			{
				background-color: #efefef;
				color: #000;
				height: 400px;
				width: 48%;
				float: left;
			}
			.rightDiv
			{
				background-color: #efefef;
				color: #000;
				height: 400px;
				width: 48%;
				float: right;
			}			
		</style>
	</head>
	<body style="text-align: center;">
		<h1>CSS - Make Two DIVs Left and Right Aligned inside Main DIV.</h1>
		<div class="outerDiv">
			<div class="leftDiv">
				This is Left DIV.
			</div>
			<div class="rightDiv">
				This is Right DIV.
			</div>		
			<div "style: clear:both;"></div>
		</div>
	</body>
</html>

Result

make two divs left and right using css





Comments and Discussions

Ad: Are you a blogger? Join our Blogging forum.




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates


© https://www.includehelp.com some rights reserved.