CSS Background with center wrapper

HTML & CSS
1

So i have a site that i have started created http://reginastrauss.com/dev/ dont mind the middle image i know its large at the moment. anyways so i created this layout and the way i did it was using width 100% to make the black sections stretch side to side, however i want the page to be 900px wide for text and logo and everything else so i wasnt sure if i should create all these black sections across then create a wrapper div 900 wide and just use absolute position to line them up with underneath?

2

I would create a <div class="wrapper></div> inside of each your larger sections

I would also add a <div id=“content”></div> between Navigation and BottomNavigation (make those lowercase, btw)

You can also remove the position: absolute from things like the Navigation and BottomNavigation
Then just make


.wrapper {
  width: 960px;
  height: 100%;
  margin: auto;
}

You will have issues with a dynamically sized content section and a background, however. But you’ll notice that.

Also, I get this HUGE block of white background when updating things; hopefully you’ll see. Didn’t take any time to debug it, just noticed it.

3

Hi,

As said above I would also use a 100% wide wrapper for each of the wide elements then nest an inner element of the appropriate width to carry the text etc. However remember to also set a min-width on the 100% wide wrapper that matches the width you set on the inner element or the background will disappear at smaller sizes or when scrolled horizontally.

I also note that you are outputting a BOM (byte order mark) into the css file which could give some browsers problems.


[B][/B]html, body {
    height:100%;
}

Use the webdev toolbar in Firefox and click on edit.css and you will see the characters at the top of the css file. they could corrupt the first rule in some browsers so make sure you don’t output them.