Question

I have html like:

<div id="container">
   <div id="content">
      <!-- whole site here -->
   </div>
</div>


#container {
  width: 1280px;
  background-image: url(/image);
}

#content {
  width: 890px;
}

Does anyone know of a way to make it so that when the browser window is resized to less than 1280px it does not start the horizontal scrollbar until the content width (890px) is reached? I have been wracking my brain over this for hours. I have heard of all sorts of negative margin tricks and have tried a couple to no avail. The main issue is, I don’t even know what this is called so it is extremely difficult to search for. Could someone point me in the right direction? Thank you.

Answer 1

Have you tried:

@media all and (max-width: 1280px) {
    #container { width: 100%; }
}

All the above does, is make the #container the width of the screen, when the screen is less than 1280 pixels wide.

The scrollbar should kick in at 890px due to #content still having a fixed width.

Hope that solves it.

And if you haven’t heard about media queries, Google them, you can do pretty cool things with them.