Why is this div with position:absolute taking all remaining width? - css

Question

I have a container with position:relative and three children
with position:absolute.
HTML
<div class="container">
<div>left</div>
<div>middle</div>
<div>right</div>
</div>
CSS
div{
border:1px solid;
}
.container{
height:200px;
position:relative;
}
.container > div{
height:190px;
position:absolute;
}
.container > :nth-child(1){
background:red;
left:0;
}
.container > :nth-child(2){
//background:green;
margin:auto;
left:0;
right:0;
}
.container > :nth-child(3){
background:blue;
right:0;
}
http://jsfiddle.net/7xqwrtq2/
The children are positioned in this order: left, center and right.
How can I prevent the centered div from taking all remaining width?
I want it to be like the others where the width is adjusted to the
content. I don't want to set a fixed width neither.
Thanks in advance.

Answer 1

The kind of layout you are looking for cannot be achieved through absolute positioning. You've to use floats instead.
<div class="container">
<div>left</div>
<div>right</div>
<div>middle</div>
<div class="clear"></div>
</div>
div{
border:1px solid;
}
.container{
height:200px;
position:relative;
}
.container > div{
height:190px;
}
.container > :nth-child(1){
background:red;
float: left;
}
.container > :nth-child(2){
//background:green;
float: right;
}
.container > :nth-child(3){
background:blue;
overflow: hidden;
}
.clear{
clear: both;
}

Answer 2

is this what you need?
http://jsfiddle.net/7xqwrtq2/1/
just add 33% width to them
.container > div{
height:190px;
position:absolute;
width:33%;
}

Answer 3

The reason the center column is stretching is because you specify: left: 0; and right: 0; pushing the margins of the column all the way out to where it will fit.
If you change your .container > div like so:
.container > div{
height:190px;
max-width: 33%;
box-sizing: border-box;
float: left;
}
and remove all left: and right: properties from the nth-child section of the CSS, I think you'll get closer to the results you are looking for. You can tweak it, but if you fail to define at least a max-width, you may risk your furthest right column dropping down a line. Using floating columns may not be the best approach, so be sure to clear:both; to reset the layout underneath.
The box-sizing border-box property is to make sure borders and padding are taken into account with the "width" property.
If you see here:
http://jsfiddle.net/7xqwrtq2/6/
I set the 1st and 3rd columns to max-width: 25%, and the center to 50%. (I took out the max-width: 33% in .container > div) However, the three columns never take it to the full 100% width because the content in the center column isn't enough to take it there.

Answer 4

Assuming you don't want "equal sizes", but rather "each div expands to fill only the necessary space, let all the divs use inline-block:
.container > div{
height:190px;
display: inline-block;
}
and change only the color with the :nth-child selectors.
Here's the JSFiddle that shows it.
http://jsfiddle.net/7xqwrtq2/5/