Problems with css layout, div positioning, alignment and z-index's_问答_开发者

I am really struggling with this one. Below is an image of a layout I am wanting to achieve. It has a few overlay's etc. Hopefully the image will explain more about the look, I am having real trouble with the two cols inside the content. I can't seem to get them together, with the background going to the bottom, and the footer displaying below.

I hope this makes sense.

One more thing the two cols should be a little higher than they way its displayed on the image, they should appear above the #mainImage div still within the content, just not below.

Problems with css layout, div positioning, alignment and z-index's

UPDATE

I have updated the code, hopefully giving you a better understanding with what i'm after and the problems i'm having.

    <html>
<head>
<style type="text/css">
body {
    background-color: #c0cdd7;
    color: #444444;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    text-align: left;
    font: normal normal 13px Arial, 'Lucida Grande', Verdana, Sans-Serif;
}
.wrapper {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}
#logo {
    position: absolute;
    background-color: white;
    margin-left: 30px;
    z-index: 10;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-image: url(../images/logo.gif);
    height: 100px;
    width: 300px;
}

#header {
    background-color: white;
    height: 50px;
    text-align: right;
    width: 100%;
}

#navigation {
    margin-left: 330px;
    position: absolute;
    margin-right: 30px;
    font-weight: bold;
    letter-spacing: 1px;
    word-spacing: 5px;
    font-size: 11px;
    color: #6caddf;
    margin-top: 25px;
    text-transform: uppercase;
    text-align: right;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 600px;
}

#navigation li {
    padding-left: 10px;
    padding-right: 10px;
    border-right-color: #cccccc;
    border-right-width: 1px;
    border-right-style: solid;
    list-style-type: none;
    display: inline;
}

#navigation li.last {
    border-right-style: none;
    list-style-type: none;
}

#navigation li.active a {
    font-weight: bold;
    color: #6caddf;
    list-style-type: none;
}

#mainImage {
    background-color: #0b0b0b;
    position: relative;
    height: 400px;
    width: 960px;
    z-index: 1;
    margin-top: 0px;
}

#content {
    position: relative;
    padding: 30px;
    margin-top: -60px;
    width: 840px;
    margin-left: 30px;
    margin-right: 30px;
    background-color: white;
    z-index: 15;
}

#content .col1 {
    text-overflow: ellipsis;
    z-index: 0;
    width: 250px;
}

#content .col2 {
    float: right;
    padding-left: 30px;
    margin-left: 250px;
    z-index: 0;
    width: 570px;
}

#footer {
    border-top-color: #888888;
    border-top-width: 1px;
    border-top-style: dotted;
    color: #888888;
    padding: 30px;
    clear: both;    
}

#copyright {
    color: #888888;
    padding: 30px;
    clear: both;
    text-align: left;
    font-size: 9px;
}
</style>
<body>
<div id="header">
    <div class="wrapper">
    <div id="logo"></div>
    </div></div>
    <div class="wrapper">
    <div id="mainImage">
    </div>
    <div id="content">
    <div class="col1"><h1>Title</h1><p>Heights on these columns do not matter, just the positioning<br/>Hopefully you can see from this example that the columns aren't aligned, and the white background doesn't flow all the way down.</p></div>
    <div class="col2"><h1>Title</h1><p>Aliqui sita sint omnimaio corporporem. Nequam, nobis nis endam, omnis porecto experuptatae plitibus aped moditaquo te velia ventemporro commolu ptatum re pa si que cullaborem et molupta tiorit vendam, ulliquu ndeserc idest, optur? Quide cusdandel ipsandunt as ipsum reria corehendae vendipi ciisqui omnia nis re coriatu resciis eaquam fuga. Nam, sit res evendamus diam fuga. Odis quae num quibus consequamus expera alit fugiam, odis et volut ant aut vollaborae conecum rem quam fuga. Quis dolut poribus solorias sincias est velestiberum as quo tem ipsandit quaescienist volore dolum fuga. Ovid magnatque volum faciten imusam elentis auta quisquae parum quatur, optatur? At vitati 开发者_如何学编程ulpa velendis none preicit, sita quiatiaes evenihi llorum dis issimpe rchicitior solorepelit ut veliciant. Ur? Quia acime omniendipiet andis</p></div>
    </div>
    <div id="footer">
    <p>Just you standard footer/copyright info to go here 2011</p>
    </div>
    </div>
    </div>
</body>
</head>
</html>

Side by side divs should be floated left and then a clear element put behind them.

Here you go:

<style>
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, images, ins, kbd,q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

body {
    background-color: #c0cdd7;
    color: #444444;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    text-align: left;
    font: normal normal 13px Arial, 'Lucida Grande', Verdana, Sans-Serif;
}

div {
    border: 1px solid red;
    margin:-1px;
}

.wrapper {
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

#logo {
    position: absolute;
    background-color: white;
    margin-left: 30px;
    z-index: 10;
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-image: url(../images/logo.gif);
    height: 100px;
    width: 300px;
}

#header {
    background-color: white;
    height: 50px;
    text-align: right;
    width: 100%;
}

#navigation {
    margin-left: 330px;
    position: absolute;
    margin-right: 30px;
    font-weight: bold;
    letter-spacing: 1px;
    word-spacing: 5px;
    font-size: 11px;
    color: #6caddf;
    margin-top: 25px;
    text-transform: uppercase;
    text-align: right;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 600px;
}

#navigation li {
    padding-left: 10px;
    padding-right: 10px;
    border-right-color: #cccccc;
    border-right-width: 1px;
    border-right-style: solid;
    list-style-type: none;
    display: inline;
}

#navigation li.last {
    border-right-style: none;
    list-style-type: none;
}

#navigation li.active a {
    font-weight: bold;
    color: #6caddf;
    list-style-type: none;
}

#mainImage {
    position: relative;
    height: 400px;
    width: 960px;
    z-index: 1;
    margin-top: 0px;
    background-color:red;
}

#content {
    position: relative;
    padding: 30px;
    margin-top: -60px;
    width: 840px;
    margin-left: 30px;
    margin-right: 30px;
    background-color: white;
    z-index: 15;
}

#content .col1 {
    text-overflow: ellipsis;
    z-index: 0;
    width: 250px;
    background-color:red;
    float:left;
    border:0;
    height:300px;
}

#content .col2 {
    z-index: 0;
    width: 570px;
    background-color:green;
    float:left;
    margin-left:20px;
    border:0;
    height:300px;
}

#footer {
    border-top-color: #888888;
    border-top-width: 1px;
    border-top-style: dotted;
    color: #888888;
    padding: 30px;
    clear: both;    
}

#copyright {
    color: #888888;
    padding: 30px;
    clear: both;
    text-align: left;
    font-size: 9px;
}

.clr {clear:both;}
</style>

<div id="header">
    <div class="wrapper">
        <div id="logo"></div>

        <ul id="navigation">
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

<div class="wrapper">

    <div id="mainImage"></div>

    <div id="content">
        <div class="col1">&nbsp;</div>
        <div class="col2">&nbsp;</div>

        <div class="clr"></div>
    </div>

    <div id="footer"></div>

    <div id="copyright"></div>
</div>

Code is still messy but your problem has been solved.

It's difficult to tell exactly what you're after, especially as your sample code is not a minimal example, but contains things unrelated to the problem, contains no text, relies on images you haven't supplied, and generally renders nothing like your diagram for me, so I'm actually just guessing that you're trying to have columns alongside each other of equal height without using tables.

There are many ways to achieve this but it cannot simply be done directly. The columns are floated and so have no effect on their container's size, unless you place a clearing element afterwards. You won't get their heights the same, but you can make it appear that they are. One way is to use a background image on the container which looks like column divisions.

Another is this hack, which by sheer coincidence I just whipped up for somebody else: http://cssdesk.com/4Yt5j

I suppose the problem is the aligment of second column. Remove margin-left: 250px; padding-left: 30px; from #content .col2. Also add float:left; for #content .col1.

Then to clear floats, add overflow:auto in the parent div #content.

If you want to have padding-left for the second column, then you have to edit the width of the accordingly. For example, if you want padding-left:30px; then you must edit the width of #content .col2 to 540px.

More information about the above logic you can find on the explanation of box-model http://www.w3.org/TR/CSS21/box.html

Demo: http://jsbin.com/uqebi5

I've made a start for you, but for future reference follow ZoFreX's advice and bare it down to the most minimal example you can, then ask us a qusestion.

Check out my example here.