CODEWITHSUNDEEP
csscss-position
Boel
Boel

Reputation: 976

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

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.

Upvotes: 0

Views: 534

Answers (4)

Gus
Gus

Reputation: 3554

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/

Upvotes: 1

Dan Orlovsky
Dan Orlovsky

Reputation: 1095

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.

Upvotes: 1

Balaji Viswanath
Balaji Viswanath

Reputation: 1684

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

Upvotes: 1

Scoala
Scoala

Reputation: 150

is this what you need?

http://jsfiddle.net/7xqwrtq2/1/

just add 33% width to them

.container > div{
    height:190px;
    position:absolute;
    width:33%;
}

Upvotes: 1

Related Questions