Background 10px top 30px bottom

HTML & CSS
1

I just received a Photoshop mock-up which you can see here as you can see the background from both columns is about 30 px from the bottom. What would be the best way to do this? Thank you in advance

2

if you have no other wrapper for the columns, it seems the ideal solution would be

body{ padding-top:10px; padding-bottom:30px;}

3

Hi dresden. Thanks for the response. I have another wrapper. For now I have taken one of Paul O’B’s methods (absoluut positioned divs holding the background image) But that doesn’t give the bottom margin, it only extends depending on the content. But is is a start :slight_smile:

4

If you are using my absolute column technique then you can specify bottom:30px instead of bottom:0 quite easily. :slight_smile: Just give the inner content a padding bottom of 3px to keep it clear.

5

Here’s an example although for IE6 you’d need to rub out the top part of the columns with the background of an inner element.


<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
    margin:0;
    padding:0;
    height:100%;
}
p {margin:0 0 1em}
body {
    background:#09f;
    color:#fff
}
#outer {
    width:800px;
    margin:auto;
    min-height:100%;
    position:relative;
    overflow:hidden
}
* html #outer {height:100%}
#col1, #col2 {
    float:left;
    width:160px;
    padding:30px 10px;
    position:relative;
    z-index:2;
}
#col2 {
    float:right;
    width:580px;
}
.abs1, .abs2 {
    position:absolute;
    left:0;
    top:20px;
    z-index:1;
    bottom:30px;
    width:150px;
    opacity:0.4;
    -ms-filter: "Alpha(Opacity=40)";
    filter:Alpha(Opacity=40);
    background:#00f;
}
.abs2 {
    left:200px;
    width:600px;
}
* html .abs1, * html .abs2 {
    top:auto;
    height:999em;
}
</style>
</head>
<body>
<div id="outer">
    <div id="col1">
        <p>Test Column1</p>
    </div>
    <div id="col2">
        <p>Test column 2</p>
    </div>
    <div class="abs1"></div>
    <div class="abs2"></div>
</div>
</body>
</html>
6

Thanks Paul, your in one word brilliant :slight_smile: Mi Gado (means my god) you made my day thanks a lot