There is a large gap between 2 divs

HTML & CSS
1

I have a large background gap between .outer and #contentWrapper. Anyway please have a look at my example. Could someone please tell me how I can make the white background in #contentWrapper, appear in the background of the business woman’s shoes? Is that possible? Thanks in advance.

2

You could drag the contentWrapper underneath the image with a negative margin-top.

You should also center the body background image and then set a min width on html,body to match.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Experiment</title>
<style type="text/css">
html,body{min-width:900px}
body {
    background: #002535;
    color: #000;
    background: #002535 url('http://website-building.info/images/mainbg.jpg') no-repeat 50% 0;
}
img {
    border: none;
}
#pageWrapper {
    width: 900px;
    text-align: left;
    margin: 0 auto;
    overflow: hidden;
}
.outer {
    overflow:hidden;
    position:relative;
    z-index:5;
}
.outer .content {
    position:relative;
    z-index:4;
}
.outer p, .outer img {
    float:left;
    position:relative;
    width: 100%;
}
#apdiv {
    position:absolute;
    left:0;
    top:0;
    height:999em;/* we could have used bottom:0 but IE doesn't understand that so we need to use a height bigger than we ever need and the extra height is hidden by the overflow:hidden on the parent.*/
    width:100%;
    background: url('http://website-building.info/images/headerbg.png') no-repeat;
    opacity:.5; /* FX/Opera/Safari/Chrome */
    -ms-filter:"alpha(opacity=50)"; /* IE8 */
    filter:alpha(opacity=50); /* IE6/IE7 */
}
.businessWoman {
    float: left;
    width: 366px;
    position:relative;
    z-index:2;
    margin:0;
}
.businessWoman img {
    padding-right: 4em;
}
.headerInfo {
    float: right;
    width: 40%;
    margin-right: 10em;
    margin-top: 3em;
}
.headerInfo img {
    width: 138px;
    padding-right: 1em;
}
#contentWrapper {
    background: #FFF;
    overflow: hidden;
    width: 100%;
    padding: 1em;
    position:relative;
    z-index:1;
    margin-top:-20px;
}
</style>
</head>
<body>
<div id="pageWrapper">
    <div class="outer">
        <div class="content">
            <p class="businessWoman"><img alt="business woman jumping for joy" height="406" src="http://website-building.info/images/business-woman.gif" width="366" /> </p>
            <div class="headerInfo">
                <h1>Heading here</h1>
                <p>Paragraph here.</p>
                <p>Paragraph here.</p>
                <p><img alt="See Portfolio" height="45" src="http://website-building.info/images/portfoliobtn.gif" width="138" /> <img alt="Contact Me" height="45" src="http://website-building.info/images/contactbtn.gif" width="138" /></p>
            </div>
        </div>
        <div id="apdiv"></div>
    </div>
    <div id="contentWrapper"></div>
</div>
</body>
</html>