Home/ Questions/Q 8480019
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T19:11:35+00:00

While trying to create a div ‘ed structure I am having difficulty on covering

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to clear your floats:

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