How can I align 3 divs side by side? - css

Question

I have 3 div's, 200px,300px and 200px how can I align them side by side, all the examples I have seen only include 2. I have Div1,Div2 working correctly but Div3 for some reason slides under Div1 lie this picture
This is my code
<div style=" border-right:1px solid black; width:200px; float:left; position:relative; ">
//div1
</div>
<div style=" border-right:1px solid black; width:300px; padding:10px;float:left; position:relative;">
//div2
</div>
<div style=" float: left; width: 200px;position:relative">
//div3
</div>
The Div1 has the shorter content on it, how can I make the border to the right as long as the border in Div2?

Answer 1

All the elements in one line
Wrap the div elements in a wrapper:
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
Then set the width of the wrapper, and float all three divs:
#wrapper {
width:700px;
clear:both;
}
#first {
background-color:red;
width:200px;
float:left;
}
#second {
background-color:blue;
width:300px;
float:left;
}
#third {
background-color:#bada55;
width:200px;
float:left;
}
Also, use IDs and/or classes, and keep the CSS separate from the HTML. This makes the code easier to read and maintain.
The fiddle.
All elements in one line, same height
To accomplish the "same height" part, you can use display:table, display:table-row, and display:table-cell to get matching heights. It uses an extra div, so the HTML looks like:
<div id="wrapper">
<div id="row">
<div id="first">first</div>
<div id="second">second<br><br></div>
<div id="third">third</div>
</div>
</div>
The floats can then be removed, so the CSS looks like:
#wrapper {
display:table;
width:700px;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:200px;
}
#second {
display:table-cell;
background-color:blue;
width:300px;
}
#third {
display:table-cell;
background-color:#bada55;
width:200px;
}
The fiddle.
The Flexbox Way
If you're only supporting newer browsers (IE 10 and up), Flexbox is another good choice. Make sure to prefix for better support. More on the prefixes can be found here.
The HTML
<div class="container">
<div class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
<div class="second">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ratione rerum deserunt reiciendis numquam fugit dolor eligendi fuga sit. Hic, tempore. Error, temporibus possimus deserunt quisquam rerum dolor quam natus.Fugiat nam recusandae doloribus culpa obcaecati facere eligendi consectetur cum eveniet quod et, eum, libero esse voluptates. Ut commodi consequuntur eligendi doloremque deserunt modi animi explicabo aperiam, non, quas qui!</div>
<div class="third">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet obcaecati, rem. Ullam quia quae, ad, unde saepe velit incidunt, aliquid eum facere obcaecati molestiae? Repellendus tempore magnam facere, sint similique!</div>
</div>
The CSS
.container {
display:flex;
justify-content:center;
}
.container > div {
margin:10px;
background-color:#bada55;
}
.first, .third {
width:200px;
}
.second {
width:300px;
}
The Codepen.
The Grid Way
You can accomplish this with grid now, too, though browser support might be an issue if you're supporting older browsers. It's the same HTML as with the flexbox example, with just different CSS:
The CSS
.container {
display:grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
grid-column-gap: 10px;
width:700px;
}
.container > div {
background-color:#bada55;
}
.first, .third {
width:200px;
}
.second {
width:300px;
}
The codepen.

Answer 2

The HTML code is
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
The CSS will be
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
This code will workup towards responsive layout as it will resize the
<div>
according to device width.
Even one can silent anyone
<div>
as
<!--<div id="third">third</div> -->
and can use rest two for two
<div>
side by side.