0

For my header, I have a repeating element that will expand whatever the browser width is -- 2000px, 4000px, etc. Inside the header element, I have a 1200px wide background that is fixed. My page layout is 960px wide.

If I set the fixed with to 1200px, horizontal scrollbars will appear for users with a browser width below 1200px.

How can I make it so people with a 1100px browser window will not see horizontal scrollbars?

header {
  background: #000 url("/images/bg-header-repeat.png") repeat;
  position: relative;
}

.header-wrapper {
  background: url("/images/bg-header.png") no-repeat left top;
  margin: 0 auto;
  min-height: 100px;
  width: 1200px;
}

.container {
  margin: 0 auto;
  width: 960px;
}
Zoolander
  • 2,293
  • 5
  • 27
  • 37

2 Answers2

1

don't give static (and that large) width to your container.

do this:

.header-wrapper {
  background: url("/images/bg-header.png") no-repeat left top;
  min-height: 100px;
  width:100%;
  position:relative;
  left:0;
  top:0;
}

.container
{
    position:relative;
    width:80%;
}

giving large static width is prone to bring horizontal scroll bar in some resolution. If you want to cover entire browser width on a wide range of resolution that, give width in percentage. Also making your container position:relative makes its top, left, right and bottom properties active. so you won't need to use margin. These properties pick their value relative to the parent container.

Manish Mishra
  • 12,163
  • 5
  • 35
  • 59
  • Thanks for the answer. Your code worked, except I just had to change the background positioning to "center top". – Zoolander Mar 11 '13 at 14:21
0

Try adding max-width so the header changes width on smaller screens:

.header-wrapper {
  background: url("/images/bg-header.png") no-repeat left top;
  margin: 0 auto;
  min-height: 100px;
  max-width: 1200px;
}
Marc Lloyd
  • 304
  • 1
  • 7