Forums

Odd_E

I'm looking to make a website that has the header and footer background/background images stretched to the whole page, but the text aligned to one central div. I've illustrated my point below.
Image
Excuse my rushed visual, and terrible color scheme. The text should be in the brighter area, but I don't actually want the div whiter in the final project. Same with the footer. All the settings are changeable as if it's in the wrap (which it should be) but the whole background image should stretch 100% of the browser window.

Thanks for your guys' help. :-)

JoshWhite

It looks like you could achieve it by just using 3 individual wrappers to separate the sections (top, content, footer), and then just use an image to repeat horizontally. It gets a little div heavy but does the job nicely.

Odd_E

I see. And then I'd just adjust the height in both rather than just one. Well thanks! That helped a lot I guess. Not what I was expecting, but good.

JoshWhite

Well, you'd have a fluid height on the middle one. Something kinda like this.



<div id="top-wrapper" style="height:100px;">
   <div id="top-content" style="width:960px; margin:auto;"> stuff here </div>
</div>

<div id="content-wrapper">
  <div style="width:960px; margin:auto; overflow:auto;"> Content </div>
</div>

<div id="footer-wrapper" style="height:150px;">
   <div id="footer-content" style="width:960px; margin:auto;"> stuff here </div>
</div>

There's probably better ways of doing it, but this is how I've done it in the past when I needed something specific like that. I suppose you could also use a stickyfooter technique as well and get a result that's close.

Odd_E

Thank you, it worked perfectly!

treehouse : what would you like to learn today?

Forums

[Solved] Design Help?