CODEWITHSUNDEEP
htmlcsscenter
christian
christian

Reputation: 2489

Centering fixed width layout while keeping a minimum width scrollable

I am working on a graphically intense layout, so to keep file size down I am limiting the layout to a 1600 pixel fixed width.

Of the 1600 pixels, the important content falls within the center 1230.

I am trying to find a way to center the layout in the browser while keeping the content scrollable.

This solution does not center when the browser window is less than 1600px

#page{margin: 0 auto;}

This solution makes left hand side of content unreachable as the browser width gets smaller.

#page{position: absolute; width: 1600px; top: 0; left: 50%; margin-left: -800px; }

Thanks for any help.

Upvotes: 1

Views: 166

Answers (3)

christian
christian

Reputation: 2489

This solution solves the inaccessible content issues.

If you have the following structure

#wrap.constrained > #layout > #content.constrained

You can use the constrained class to limit both #wrap and #content to the desired width and center both horizontally by setting side margins to "auto".

You could then position #layout absolutely, have it be bigger than .constrained, and use a combination of left positioning and negative left margin to center it in regards to #wrap.

Here's an example: http://jsfiddle.net/caKA7/

Upvotes: 0

xpy
xpy

Reputation: 5631

If you want to center an element in a wrapper that is smaller than the element and you can use absolute:

    #page{
      position: absolute;
      width: 1600px;
      top: 0;
      left:-100%;
      right:-100%;
      margin-left: auto;
      margin-right: auto;
   }

example:http://jsfiddle.net/pavloschris/T5d8W/

Upvotes: 2

Alex Feinman
Alex Feinman

Reputation: 5563

I'm not sure you need to limit width in pixels. It isn't very portable across devices, and it's not clear why you're doing it. However, if you want to center a 1230px region within 1600px, you can just use fixed-width margins of size (1600-1230) / 2.

For more flexible solutions, are flex-boxes an acceptable technology? If so, they make this task trivial. Make page container with:

  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;

Then make your items

  flex: 0 0 auto

or set a specific width instead of auto.

Upvotes: 1

Related Questions