CODEWITHSUNDEEP
htmlcss
Juggernaut
Juggernaut

Reputation: 325

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

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

Upvotes: 3

Views: 8894

Answers (2)

sinisake
sinisake

Reputation: 11318

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

Upvotes: 2

JunM
JunM

Reputation: 7150

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

Upvotes: 0

Related Questions