How can I align 3 divs side by side?
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 div
s:
#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.
How to make 3 divs side by side
try this one. position: absolute;
.container { border: 1px solid; position: relative; overflow: hidden; }.container div { height: 50px; width: 50px; background: red; display: inline-block; }#div1 { float: left;}#div3 { float: right;}#div2 { position: absolute; left: 0; right: 0; margin: auto;}
<div class="container">
<div id="div1"></div> <div id="div2">he</div>
<div id="div3"></div></div>
Three divs side by side with spacing in between
You might be better using a flexbox to achieve what you need. Create a container for the three .box divs, and style it with the following:
display:flex;
justify-content:space-between;
Keep in mind that the width of your .box divs will need to be lowered to achieve the space you want and that you would not require the float:left; in the css.
For more info on flexboxes, click here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
CSS: How to float 3 divs side by side for width:100% without messing up?
The borders are not counted within the div's box. They are to add, and thus are messing up your set, its width is : 3boxes * (33%+3px+3px), which is likely more than 100%.
Use :
.left {
float:left;
width:33.3%;
border: 3px solid #333;
}
.box-sizing { box-sizing: border-box; }
See Fiddle demo, you can resize the result box it stays perfect. :)
How can i put 3 divs side by side with a margin and a border?
You can always use calc and percentage based widths:
.trendingBox {
border: 1px solid #e5e5e5;
background: #fff;
margin: 0 2px 0 0;
width: calc(100% / 3 - 4px);
}
If you want to support multiple browser widths separately you can use media queries:
@media(max-width: 600px) {
.trendingBox {
border: 1px solid #e5e5e5;
background: #fff;
margin: 0 2px 0 0;
width: calc(100% / 2 - 4px);
}
}
@media(min-width: 601px) {
.trendingBox {
border: 1px solid #e5e5e5;
background: #fff;
margin: 0 2px 0 0;
width: calc(100% / 3 - 4px);
}
}
Placing 3 div's Side by Side
You could float: left
all the inner div
s:
http://jsfiddle.net/W8dyy/
You should fix the spelling of quotescointainer
to quotescontainer
.
#quotescointainer{
width: 100%;
font-size: 12px;
overflow: hidden; /* contain floated elements */
background: #ccc
}
#quotesleft {
float: left;
width: 33%;
background-color: #bbb;
}
#quotescenter {
float: left;
background-color: #eee;
width: 33%;
}
#quotesright{
float: left;
width: 33%;
background-color: #bbb;
}
Related Topics
Align Inline-Block Divs to Top of Container Element
Transitions on the CSS Display Property
How to Transition Height: 0; to Height: Auto; Using Css
How to Disable Text Selection Highlighting
How to Center an Absolutely Positioned Element in a Div
Chrome/Safari Not Filling 100% Height of Flex Parent
2 Column Div Layout: Right Column With Fixed Width, Left Fluid
How to Word-Wrap Long Words in a Div
Format Text in a ≪Textarea≫
Size of Html5 Canvas Via CSS Versus Element Attributes
How to Add a Scrollbar to an Html5 Table
Font Awesome Not Working, Icons Showing as Squares
How to Style the Html5 Form Validation Error Messages With Css
Is There a "Previous Sibling" Selector
How to Combine :Nth-Child() or :Nth-Of-Type() With an Arbitrary Selector