center align a resizing, absolute div [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.

Closed 8 years ago.

Improve this question

I have a page set up however I am having trouble aligning the news articles to the center of the page.

Here is a link to what I have so far -

http://casb1.cloudapp.net/1016/1be61016ff9a717aa34c2adf7c5aa79e/3D%20Design/news%20articles/news.html

Basically I need the red area to always be the same distance from the edges, even when it expands. Is this possible?

The red container has the css of position:absolute

Any help would be hugely appreciated.

PS. this is only my first week of learning css and html so please forgive me if it is something simple.

Thanks

Answer 1

I think you don't need the position:absolute you can delete this property and add this:

.collection {
   display:table;
   margin:auto;
}

Answer 2

There's a lot that can be impoved, but going to your question, I'd do something like this:

.collection {
    position: static;
    display: inline-block;
}
.roundcont {
    text-align: center;
}

You basically need to remove the position: absolute; attribute from your .collection element and change its display to inline or inline-block and then set text-align center; to its parent div so now it looks centered.