How do I expand my <div> to properly fit more vertical content?

Posted by CSS_maniac on Stack Overflow See other posts from Stack Overflow or by CSS_maniac
Published on 2012-09-02T21:26:44Z Indexed on 2012/09/02 21:38 UTC
Read the original article Hit count: 216

Filed under:
|

Whenever I try to add margin-top: 30px to my box_1 and box_2 <div>, my bottom <div> gets pushed down and disappears. It seems like my wrapper wont expand to fit the content.

How do I get a 30px gap between top and box_1/2 and bottom?

<html>

<head>
    <title>Circle Motion</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body> 
    <div id="outer-wrapper">
        <div id="wrapper">

            <div id="top">  
            </div>

            <div id="box_1">
            <img src="chrome_400x400.png" />
            </div>

            <div id="box_2">
            <img src="firefox_400x400.png" />
            </div>

            <div id="bottom">
            <p>All Rights Reserved - CSS_maniac 2012 ©</p>
            </div>

        </div>
    </div>
</body>

</html>

CSS

/* My CSS */

html {
    height: 100%
}

body {
    background-color: grey;
    }

#outer-wrapper {
    height: 100%;
    width: 1000px;
    margin: 0px auto;
    background-color: #EAFFDB;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

#wrapper {
    height: 100%;
    width: 960px;
    margin: 0px auto;
    background-color: #EAFFDB;
    overflow: hidden;
}

#top {
    width: 900px;
    height: 110px;
    margin-top: 35px;
    margin-left: 30px;
    margin-right: 30px;
    background-color: white;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

#box_1 {
    width: 430px;
    height: 430px;
    background-color: white;
    -moz-border-radius: 15px;
    border-radius: 15px;
    float:left;
    margin-left: 30px;
    text-align: center;
}

#box_2 {
    width: 430px;
    height: 430px;
    background-color: white;
    -moz-border-radius: 15px;
    border-radius: 15px;
    float:right;
    margin-right: 30px;
    text-align: center;
}       

#box_1 img {
    margin: 15px 0px;
}

#box_2 img {
    margin: 15px 0px;
}

#bottom {
    width: 900px;
    margin: 0px auto 0px auto;
    text-align: center;
    background-color: white;
    -moz-border-radius: 15px;
    border-radius: 15px;
    clear:both;
}

/* Classes */

.clear {
    clear: both;
}

© Stack Overflow or respective owner

Related posts about html

Related posts about css