CODEWITHSUNDEEP
htmlcss
tnw
tnw

Reputation: 13877

How to make dynamic content positioning?

You see tons of sites with their content very nicely centered, like dribbble.com for example. Even when the window is resized, the content stays centered and when it hits against the side of the page, stops.

I would really like to get this behavior on my website but I'm not really sure how to go about the CSS to make this happen... I'm aware of the position property and using percentages for the left/right positioning but it doesn't seem to be quite that simple.

Can someone help me figure out how to do something like this?

Upvotes: 2

Views: 242

Answers (3)

SteeveDroz
SteeveDroz

Reputation: 6136

Maybe with this CSS:

.content {
  position:absolute;
  left:100px;
  right:100px;
}

Upvotes: 2

methodofaction
methodofaction

Reputation: 72405

The standard practice is to have a div that wraps your centered content, such as...

<div id="container">
   ...everything you want to center
</div>

And the in your CSS:

#container {
  width: 970px;
  margin: 0 auto; /*first value the margin for top and bottom, auto puts automatic margins in the left and right to center the content*/
}

Upvotes: 3

Quentin
Quentin

Reputation: 943579

I'm aware of the position property and using percentages for the left/right positioning but it doesn't seem to be quite that simple.

It's simpler.

selector-that-matches-a-container {
    width: <some length>
    margin: auto;
}

Upvotes: 3

Related Questions