How do i make wrapper div correctly wrap divs inside of it?

Question

look, here are my html and css.

html:

<!DOCTYPE html>
<head>
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="stylesheets2.css" />
</head>        
    <body>
        <div id="wrapper">
            <div id="cont1"></div>
            <div id="cont2"></div>
        </div>
    </body>
</html>

css:

*{
    border:none;
}
#wrapper{
    display:inline-block;
    background-color:lightcyan;
    position:absolute;
    top:200px;
    left:300px;
    background-color:lightyellow;
    border:1px solid green;
    }
#cont1{
    position:absolute;
    width:100px;
    height:50px;
    background-color:red;
}
#cont2{
    position:absolute;
    width:50px;
    height:100px;
    background-color:red;
}

1. How to make the wrapper div wrap these rectangles so it would have 100x100 size? note that it's undesirable to define the size of wrapper directly (height/width) because later sizes of inner divs may be modified

Can you explain a bit more about what you want? The inner divs will have to overlap if you want the holder div to be 100x100 - http://jsfiddle.net/timspqr/9B5x6/ — TimSPQR, Feb 15 '14 at 13:06
Thank you for the question! It's ok to have them overlapped, I just want to use minimal number of height/width/position definitions. The border must be 100x100 and lower right quarter of wrapper should not be hidden under cont divs. — Juggernaut, Feb 17 '14 at 07:07

score 2 · Answer 1 · edited May 23 '17 at 11:57

This will fix problem, but i had to set position of inner elements to: relative.

*{
    border:none;
}
#wrapper{
    display:inline-block;
    background-color:#ccc;
    position:absolute;
    top:200px;
    left:300px;

    border:1px solid green;
    }
#cont1{
    position:relative;
    width:100px;
    height:50px;
    background-color:red;
}
#cont2{
    position:relative;
    width:50px;
    height:100px;
    margin-top:-50px;
    background-color:red;
}

Fiddle: http://jsfiddle.net/9TZZ9/

Edit> more about problem -> absolute vs relative position width & height

score 0 · Answer 2 · answered Feb 15 '14 at 13:07

Fiddle

#wrapper{
 display:inline-block;
     position:absolute;
     top:200px;
     left:300px;
     background-color:lightyellow;
     border:1px solid green;
    }
#cont1{
    width:100px;
    height:50px;
    background-color:red;
}
#cont2{
    width:50px;
    height:100px;
    background-color:red;
}

How do i make wrapper div correctly wrap divs inside of it?

2 Answers2

Linked