In my opinion, one of the most basic things in web design is displaying 2 divs next to each other. But it can also be one of the most frustrating things to get just right. In this quick tutorial, I’ll show you the most efficient way to accomplish this task.
First we’ll need to create the divs that we intend to show side by side. Below I have the basic HTML structure set up.
<html>
<head>
<title>Divs Next to each other</title>
<style>
//CSS styles go here
</style></head>
<body>
<div class=”container”>
<div id=”div1″>Content here</div>
<div id=”div2″>Content here</div>
</div>
</body>
</html>
Next we’ll create the CSS
.container{width:600px;}
#div1{width:300px; height:300px; float: right; background:red;}
#div2{width:300px; height:300px; float: left; background:blue;}
That’s it! Essentially the only CSS rule you need is the float property. Just be sure you choose the correct div to use the left or right parameter. If you prefer all the code at once, just copy and paste the code below. Be sure to experiment on your own.
<html>
<head>
<title>Divs Next to each other</title>
<style>
.container{width:600px;}
#div1{width:300px; height:300px; float: right; background:red;}
#div2{width:300px; height:300px; float: left; background:blue;}</style>
</head>
<body>
<div class=”container”>
<div id=”div1″>Content here</div>
<div id=”div2″>Content here</div>
</div>
</body>
</html>
