Image vertical alignment

**kmoore11** · 06-06-2008, 03:37 PM

So I have a div and I want to have 2 divs inside it, one with a background image at the top, the other with a background image at the bottom.

Code:

 
div.main {
 float: left;
 height: 100%;
 width: 5px;
        background-color: blue;
}
div.top {
 position: fixed;
 top: 0px;
 background-color: red;
 height: 30px;
 width: 100%;
}
div.bottom {
 position: fixed;
 bottom: 0px;
 background-color: green;
 height: 30px;
 width: 100%;
}

The image I want at the bottom is displaying just underneath the top one. Any ideas on how to get it to go to the bottom of the div (not bottom of page!) would be appreciated. Thanks!

**wayfarer07** · 06-06-2008, 03:58 PM

Hmmm.... I don't see any background-images in your code at all. Anyway, here is how it is done (this is shorthand):

Code:

div.mine {
background: url(../images/myimage.gif) center bottom no-repeat #cb0;
}

This could also be expressed like this:

Code:

div.mine {
background-image: url(../images/myimage.gif);
background-repeat: no-repeat;
background-position: center bottom;
background-color: #cb0;
}

**LadynRed** · 06-06-2008, 08:03 PM

Whenever you float an element, you MUST define a width.
The height: 100% won't work unless it's parent is also set at height: 100%.

Position:fixed isn't supported by IE6 - and it's not the best way to do what you seem to want to do either.

**KkillgasmM** · 06-07-2008, 07:52 AM

is this sorta what you mean?
http://www.webmaster-talk.com/css-fo...alignment.html