How to Float 3 Divs Side by Side Using Css

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 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.

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 divs:

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;
}