I’m having a little trouble trying to center the content of this website, but with a full-width layout.
It would be nice to have it look like this, but centered.
Thank you!
Thank you, Paul O’B. That made the difference wonderfully, and I learned a little more! Thank you!
Have a great holiday!
If you want the image to run the full length of the page then see my post 12 where I suggest that you make the image 1022px and then center it on the body element and repeat down the y-axis. Of course your other page content will be on top so you will have to make sure you don’t cover it with something else.
You could also use a 100% min-height wrapper to carry the image but you should read the faq on 100% height first as there are complications to understand. It’s probably easier to use the body but the mage must be the same width as the layout section you want it to match. You just make the part of the image visible and the rest transparent and apply it to the body at 50% 0 background-position.
That’s the last post from me for 2 weeks 
I’m looking at the site from a large monitor and the client wants the vertical bar (the left column) to run all the way down the screen, much like the horizontal bars are doing.
Happy vacationing!
I did notice something using your method above, the vertical scrollbar does not continuously flow all the way to the bottom of the screen. I thought setting this in the body id tag would’ve allowed this flow all the way to the bottom since it’s in the body?
Paul O’B: Thank you very much for your help. This tidbit definitely made a difference. I’m still trying to understand the relative positioning. I understand absolute, but I get a little confused with the use of relative – only using it, as you said, “overlap or to move elements without changing the flow”.
I’ll try to remember that point!
Thank you!
Hi,
You may need to explain that last comment as I couldn’t quite make out what you meant and on what page we are looking at. (I am away on holiday tomorrow for a couple of weeks so someone else will need to jump in if you reply later).
Hi,
I may be looking at a different thing but the gap above the footer is the top margin of the ul that is in the footer. Remove the top margin and the coloured background will finish level with the image.
#footer-menu ul {
position: relative;
[B] margin:0 0 0 299px;[/B]
padding: 10px 0px 10px 10px;
list-style: none;
}
Your big image slides off the screen at small window sizes so set a min-width for it.
#bkgrd {
background: url(http://rewebbed.net/cvh/images/home/home_bkgrd.jpg) 50% 0% no-repeat;
height: 681px;
min-width:1023px;
}
You applied the same image to html and body. Why make the browsers do it twice? Just apply it to the body element only.
html, body {
margin: 0;
padding: 0;
}
body{
background: #efecd8 url(http://rewebbed.net/cvh/images/left_col.png) repeat-y 0% 0%;
font: normal 100% Verdana, Arial, Geneva, sans-serif;
color: #000;
}
You rarely need to applying anything to html apart from removing the margins and padding and setting height:100% if needed for special layouts. Use the body element for backgrounds and the browser will automatically apply it to html.
I’ve managed to accomplish the backgrounds and layout.
Can anyone tell me why there’s a tiny gap just above the beginning of the footer? When I commented out the float for the ‘quote’, the footer went back up to the correct positioning, but when I enabled the float, the gap reappeared.
Let me try again:
The site is left aligned. What I want to accomplish is for the background photo to be centered based upon the screen width, which I understand that’s accomplished with margin: 0 auto; as well as my content. Problem is, I lose the header and footer bars full-width screen capacity. The header and footer wind up matching the width of the container, which I don’t want. Plus, the left background shade doesn’t go to the full length of the screen, which I need.
Sorry, I’m still confused. That site is left-aligned. It leaves a big white space on the right side of my hubby’s huge monitor : )
But any content that’s inside a box itself can be centered. The box can be centered if it has a width, and that width can be a % so long as it’s less than 100% (so, automargins will work).
I’m referring to centering the content with full width background images. Something I guess similar to this theory: http://www.cssgirl.com/resources/2008/06/07/create-full-width-header-footer-with-centered-content-using-css/
Thank you guys.
I seem to be getting closer to my goal. Now I don’t understand why “bg-left” is not layering above the background photo and running down the screen.
Hi,
You’ve applied that image to the body at 24%. There is no element on your page that will match up with that at all.
If you want that image applied to the body you would need to make it 1022px wide and centred and then it would match the layout. The image would be 1022px but most of it would be transparent and only the left column part coloured in.
However there is an easier route and you can apply the image to cv-body instead.
Remove it from the body and apply it here.
body {
font: normal 100% Verdana, Arial, Geneva, sans-serif;
color: #000;
[B] background: #FFF;[/B]
}
#cv-body {
position: relative;
margin: 0px auto;
width: 1022px;
text-align: left;
}
[B]#about #cv-body{
background:url(http://rewebbed.net/cvh/images/left_col_2nd.png) repeat-y 0 0;
}
[/B]
You also have a massive horizontal scrollbar due to the incorrect use of relative positioning. Don’t use relative positioning to move things because that is unlikely to be what you want. Use margins instead. Only use relative positioning when you want things to overlap or to move elements without changing the flow. In most cases you won’t need to use relative positioning.
#bread ul{
position: relative;
[B] /*left: 299px;*/[/B]
[B]margin: 0px 0px 10px 329px;[/B]
padding: 10px 0px;
font-size: 9px;
list-style: none;
}
I’m having trouble understanding how one can center something that’s full width.
Best I can think of is adding equal side padding to the body or some wrapping element.
Thanks, Paul O’B. I’ll give that a try.
Thanks for the help, O’B. Things are looking better.
Can you tell me why on the ‘About Us’ page the vertical bar is off to the right and not set evenly behind the left column menu?
I’ve also noticed that when I tested this on a 1024x768 screen, that same bar does not line up with the left column menu (like I was hoping for). Is this one of those issues that cannot be resolved?
The header and footer divs must sit outside of the centered content div.
The cssgirl link you gave shows that, you must have missed that critical bit of info. Look at the html structure of that link and the one below.
You can set the content/wrapper width in percentages as well.