0

My question is a duplicate of this question, but I will need a pure CSS solution for this and cannot use JS to fix it. So here are my questions:

  1. Why doesn't wrapper expand although it is absolute positioned and should not be limited to its parent?
  2. Why does it exactly fit the parent?! It shouldn't expand at all if there is a problem with floated children!

CSS:

#parent{
    position: relative;
    height: 200px;
    width: 60px;
    background: red;
}

#wrapper{
    background: blue;
    position: absolute;
    top: 0;
    left: 0;
}

#wrapper > div{
    float: left;
    width: 30px;
    background: yellow;
    margin: 1px;
}

HTML:

<div id='parent'>
    <div id='wrapper'>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</div>

Here is the JSiddle demo.

Community
  • 1
  • 1
Peyman
  • 1
  • 1
  • 1
    To clarify: you want the blue div to be as wide as the yellow ones? – xec Jun 27 '13 at 12:11
  • Well, the floats are actually stretching the #wrapper (`position: absolute;` does not have full width by default), but that's because of another side-effect position: absolute; has, it introduces a new block formatting context which will contain floats. (meaning, if the yellow divs weren't floated, the blue div would be narrower) – xec Jun 27 '13 at 12:23
  • @xec Sorry about my confusion. By now I'm as confused as the OP. How is it that when you make #parent, e.g. 110 px wide, #wrapper also becomes 110px wide, but if #parent is wider, say 300px, #wrapper is only as wide as its contents? – Mr Lister Jun 27 '13 at 12:30
  • 1
    @MrLister It is a bit complicated and confusing indeed. 1) The #wrapper (abs pos) is sized relatively to its closest positioned ancestor (#parent) whose width will effectively be the max width of #wrapper (unless explicitly specified otherwise). 2) #wrapper contains the floats and needs to be a square at the same time (all elements are) 3) when the floats reach the end of the line and are about to wrap down to the next line, the wrapper stretches as far as it can (full width of parent) even though an entire floated box won't fit there. – xec Jun 27 '13 at 12:40
  • @xec Thanks, I got my answers. I thought absolute elements didn't have any restrictions on expanding, but it seems I was wrong and they are limited to their relative parents! – Peyman Jun 27 '13 at 13:04

2 Answers2

0

It's because of the position: relative on the parent div.

If you remove that and then add right:0 in the wrapper class - then you'll see it expand to max width.

FIDDLE

Danield
  • 121,619
  • 37
  • 226
  • 255
  • Thanks for the answer, but then the wrapper will get positioned relative to body which is not what I want. I need it to be positioned relative to the parent. – Peyman Jun 27 '13 at 12:53
0

If you take out the relative position off the parent div, it will work. But then it will align to the body and not the parent.

You will need to adjust the top and left position of the wrapper.

JSFIDDLE

#parent{
    height: 200px;
    width: 60px;
    background: red;
}

#wrapper{
    background: blue;
    position:absolute;
    top: 8px;
    left: 8px;
    right: 0px;
}

#wrapper > div{
    float: left;
    width: 30px;
    background: yellow;
    margin: 1px;
}
designtocode
  • 2,215
  • 4
  • 21
  • 35