Question

I’m using the Twitter Bootstrap fixed layout where the container div has:

margin-left: auto;
margin-right: auto;

So it always stays in the center.

What I want to do is position the container so that there is a 100px gap between the left browser window border and the container. When the window gets smaller I want the container move to border of the window.

How can I achieve this?

Answer 1

Ok here’s what I did:

.container {
  padding-left: 10px;
  padding-right: 250px;
}

doesn’t give me exactly the result I was looking for, but pretty close. My first span 3 is a sidebar and the last span9 main content area. The main content area is now always centered and the sidebar next to it and has a minimum gap of 10px to the window border.