CODEWITHSUNDEEP
htmlcssheight
cevizmx
cevizmx

Reputation: 391

creating dynamic height

While trying to create a div 'ed structure I am having difficulty on covering a background color. in the example below the wrap div is not covering other layers. There is something I am missing in the css but cannot figure out what is the problem :( Any help would be great :)

<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
    font-family: Arial;
}
html {
    height: 100%;
}
body {
    background: #688420;
    height: 100%;
    font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
    font-size: 12px;
    color: #000;
}
#column {
    position: relative;
    width: 950px;
    margin: auto;
}
#wrap {
    background-color:#FF0;
}
.wrapleft {
    background-color: #039;
    text-align: left;
    float:left;
    width:60%;
}
.wrapright {
    background-color:#3F9;
    text-align:left;
    float:left;
    width: 35%;
}
.seperator {
    width:5%;
    background-color:#9CC;
    float:left;
}
.space {
    width:100%;
    height:20px;
    clear:both;
}
#wrapContent {
    background-color: #C3F;
}
</style>
</head>

<body>
<div id="main">
    <div id="column">
        <div id="wrapContent">
            <div id="wrap">
                <div class="space">&nbsp;</div>
                <div class="wrapleft">
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris.  </p>
                </div><!-- wrapleft -->
                <div class="seperator">&nbsp;</div>
                <div class="wrapright">
                                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris.  </p>
                </div> <!-- wrapright -->
                <div class="space">&nbsp;</div>
                                <div class="wrapleft">
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris.  </p>
                </div><!-- wrapleft -->
                <div class="seperator">&nbsp;</div>
                <div class="wrapright">
                                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a sem risus. Suspendisse ullamcorper iaculis pellentesque. Aenean urna urna, fringilla at semper id, placerat cursus urna. Morbi tempor, orci sed elementum tempor, velit felis elementum dui, sit amet suscipit lorem sapien id nulla. Praesent molestie consequat erat, nec dictum lorem vehicula non. Aenean sodales lacinia tincidunt. Sed semper ornare augue ut malesuada. Etiam ac ornare mauris.  </p>
                </div> <!-- wrapright -->


            </div><!-- wrap -->

    </div> <!-- column -->
</div> <!-- main -->
</body>
</html>

Upvotes: 2

Views: 71

Answers (1)

Zoltan Toth
Zoltan Toth

Reputation: 47657

You have to clear your floats:

#wrap {
    background-color:#FF0;
    overflow: hidden;
}

Upvotes: 1

Related Questions