CSS: How to float 3 divs side by side for width:100% without messing up?

css css-float width border

12,003

Solution 1

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

Solution 2

I just stumbled upon this question. And while I think Hugolpz answer is fine I couldn't resist to play around on jsfiddle. So my answer is rather an experimental solution and not tested in real world scenarios. But I find it interesting somehow. Here is the fiddle.

Markup:

<div class="outer">
    <div class="box one">1</div>
    <div class="box two">2</div>
    <div class="box three">3</div>
</div>

Style:

// Color and height properties are just here for demonstration purposes.

.outer {
    position: relative; // make the parent a relative reference point to its children
    // overflow: hidden;
    height: 40px;
    background: yellow;
}
.box {
    position: absolute; // position all children absolute but relative to the parent
    width: 33.3%;
    border: 5px solid blue;
}
.one {
    left: 0; // first box to the left
    background: red;
}
.two {
    left: 33.3%; // second box placed according to the width of the first box
    background: cyan;
}
.three {
    left: 66.6%; // third box placed according to the sum of widths of the first two boxes
    background: purple;
}

Left and right borders of neighbored boxes will overlap due to their absolute position. Where one would expect the borders to become 10px in that case they visually appear as 5px.

Solution 3

the problem with your code is you set the div size to be 33% + 6px border per div.

To solve this you can simply use box-sizing and make sure you reset all the style

example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style type='text/css'>
            * { margin:0; padding:0; border:0; outline:0; } 
            .thirdContainer { float: left; display: block;  width: 33.33%; box-sizing: border-box; height: 100px;}
    </style>
</head>
<body>
    <div class="thirdContainer" style="background: yellow;"></div>
    <div class="thirdContainer" style="background: yellowgreen;"></div>
    <div class="thirdContainer" style="background: blue;"></div>

</body>
</html>

12,003

Author by

Hugolpz

Educational platform Engineer at Center for Research and Interdisciplinarity, Paris. Former PhD candidate in Chinese Teaching and Computer Assisted Language Learning (#CALL), enthusiast wikipedian. I mainly discuss a HTML/CSS/JS for #webapp, #Nodejs, #D3js, #Make, #GIS cartography, #topojson, #wikidata, #openedx. Love to ask short, clean questions on isolated issue with JSfiddle to demo it.

Updated on June 04, 2022

Comments

Hugolpz about 2 years

I want to put three div { width:33%; border: 3px solid #333;} aside within a page. But it just fails, like if the sum was superior to 100%.

How to float 3 divs side by side and occupying a width:100% without messing up ?
Saucier about 11 years

I'd like to note that the box-sizing property is not supported by IE lt 8. ;)
cimmanon about 11 years

Using absolute positioning for layout fails in most real world situations because it requires knowing the height of the content.
cimmanon about 11 years

And? IE6&7 are dead browsers.
Saucier about 11 years

@cimmanon Well yes, like I said untested et al. I was just motivated to play around and thought I would share my fiddle. :) Should we vote to delete the answer?
Hugolpz over 10 years

Well, I focus on the futur not on the past.
Doug S about 10 years

+1 This is a helpful solution. Definitely don't delete it, and it shouldn't have been down-voted either. I, for one, know my content height, so this is a valid solution, especially since the "box-sizing" solution in the other answers doesn't work in IE8 and below. Thanks!