need some CSS help

[Aharami]

Before I start, I should mention that I dont have a whole lot of experience developing for the web and some of the questions might be noobish

Im developing a website for my wedding and I need a little bit of CSS help. It's basically a wordpress blog with added pages. I chose wordpress because it will make adding content/updating easier for my fiancee.

So here is the site in question

Here are a few firebug screenshots which visually highlight how the page is laid out

page
header
outercontent
content
primary wrapper
sidebar
footer

The page lines up when the window width is > #page width (900px) but as soon as window width is shrunk anymore, the #footer doesnt line up with #page (example).

I understand this is happening because the footer isnt in side the page container and the footer width is different than the page. But is there any way to keep the left side of the footer visually lined up the left side of the page?

Thanks

 

[Aharami]

attach code didnt work properly
here is how the page is laid out
layout

and here are the main CSS selectors

html {
background: url(images/rak/bg_html.jpg) top left repeat;
}

body {
font-size: 62.5%; /* Resets 1em to 10px */
color: #444;
background: url(images/rak/bg_body.jpg) top center no-repeat;
text-align: center;
}

#page {
background: white;
width: 900px;
text-align: left;
margin: 0 auto;
position: relative;
border-top: none;
clear: both;
}

#rak-header {
position: relative;
height: 165px;
background: url(images/rak/bg_head.jpg) top center no-repeat;
}

.outercontent {
width: 900px; /*rak*/
background: url(images/rak/bg_outcont.jpg) top center repeat-y;
}

.content {
padding: 0 /*20px*/ 40px 10px;
width: 820px; /*rak*/
background: url(images/rak/bg_cont.jpg) top center no-repeat;
}

#footer {
background: url(images/rak/bg_footer.jpg) top center no-repeat;
position: relative;
height: 104px;
margin: 0 auto;
padding: 180px 0px 0px 0px;
text-align: center;
color: #777;
}

#primary {
position: relative;
float: left;
width: 580px;
padding: 10px;
}

 

[tarak]

You could set the width of both the body and background to 1200px (the width of your footer). Worked in firefox w/firebug. Gotta run to a meeting so I didn't have time to test in any other browsers.


Congrats on the wedding, and nice looking template!

 

[Aharami]

thanks. yea that will work but making #page 1200px wide will leave a lot of dead space on the left. There will be a lot of older people viewing this website and they probably still use 1024x768 resolution. All those people wont see #page as centered which is what i want.

I also tried setting
body{ width: 1200px;}
and it take the page off center.
I want the black bordered #page div to be the centered or left aligned when window is shrunk like this

 

[tarak]

If I understand right, the problem with what you're trying to do is you want the footer to scroll off into negative-x when the window is resized, but only to the point where body is left aligned. That is going to be tricky to do, hopefully someone with more css skills comes along to help.

 

[Aharami]

yea that's a good way to describe what Im trying to do.

 

[txrandom]

add min-width: 900px to #footer

 

[Aharami]

Originally posted by: txrandom
add min-width: 900px to #footer

thank you kind sir. just tried that with firebug and seemed to fix the issue. Have to do more testing when I get home

:thumbsup:

 

[Tegeril]

min-width/min-height are not reliably supported in Internet Explorer.

 

[Aluvus]

Originally posted by: Tegeril
min-width/min-height are not reliably supported in Internet Explorer.

Indeed. And the problem still shows up in IE6.

Also, in Opera 9.6 and Firefox 3.0, the footer graphic is off by 1 pixel for every other width (presumably the widths that are odd).

My suggestion would be to add a wrapper that includes the header, content, and footer, and set the width of that.

 

[Aharami]

is there any way to allow a background image to overflow its container?