Question

So I have a header/navigation bar div, this div has a repeat-x background image.
Than I’ve got a horizontal navigation which is centered over this background, but needs a min-width and normal width.

I’d like for it to show up as 80% width, and min-width 1000px, and centered.

CSS

.center-wrap {
width: 80%;
min-width: 1000px;
margin: 0 auto;
}
#bar {
width: 100%;
height: 50px;
background-image: url(images/background.jpg);
background-repeat: repeat-x;
}

HTML

<div id="bar">
    <div class"center-wrap">
        UL LI HERE
    </div>
</div>

Error

Now the problem with this is if I resize the page to below 1000px the repeat-x background image cuts off (when scrolling -> to reveal the rest of the website).

How would I go about keeping my repeat-x background image on #bar and keeping the center-wrap centered and include a min-width and percentile width?

Answer 1

Add this to your Css, Magic! 😀

body{min-width: 1000px;}

The problem is that the body is taking the window object width as max width, and the descendant are taking that width as heritage. What happens is:

You resize the window(browser) to 300px width, then body’s width = 300px, then .center-wrap = 80% of 300px, so setting min-width of body to a fixed number fixes it