How to create a horizontally-centered DIV which has a minimum width but can stretch out as needed?

I have a site layout with a fixed header, a fixed footer and a central content section; this is a sample HTML:

<body>
    <div class="Header">
        Header Text
    </div>
    <div class="Content">
        Content Text
    </div>
    <div class="Footer">
        Footer Text
    </div>
</body>

And this is my current CSS:

.Header
{
    border:1px solid black;
    height:50px;
    left:0;
    margin-left:auto;
    margin-right:auto;
    position:fixed;
    right:0;
    top:0;
    width:1000px;
}

.Content
{
    border:1px solid black;
    bottom:60px;
    left:0;
    overflow:auto;
    position:fixed;
    right:0;
    top:60px;
}

.Footer
{
    border:1px solid black;
    bottom:0;
    height:50px;
    left:0;
    margin-left:auto;
    margin-right:auto;
    position:fixed;
    right:0;
    width:1000px;
}

This works well for the header and footer, which have a fixed width; however, I can't find a way to make the content section stick in the center of the screen, unless I give it a fixed width too. I need the content section to have a minimum size equal to the header and footer, but sometimes it needs to display wider content, thus I also need it to be able to stretch horizontally if needed, up to the full browser width; in all situations, it has to stay horizontally centered. I tried various combinations of positioning parameters (including min-width,margin-left,margin-right,width:auto and so on), but nothing seems to work unless I give the DIV a fixed width too; but then, when wider content is displayed, this will force horizontal scrolling even if the browser window is actually large enough to display all of it.

How can this be accomplished?

Answers


Give the content a min-width and center it with margin

.Content {
  display: block;
  position: relative;
  min-width: 1000px;
  margin: 0 auto;
}

Here is a fiddle


Need Your Help

how to develop a Spinner changing the image of ImageView according to the user selection

android bitmap hashmap spinner out-of-memory

I am trying to develop a spinner that can change the image of ImageView according to the user selection. I have successfully developed the code like following But I would like to ask if it is possi...