INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

Centre a DIV Regardless of Screen Size

Centre a DIV Regardless of Screen Size

(OP)
I'd like to centre the DIV on a webpage regardless of screen size. I used px but that didn't scale well.

<div style="height: 488px; position: absolute; top: 37%; margin-top: -244px; width: 1090px; left: 50%; margin-left: -545px;">

Support Technician in an Educational Environmant

RE: Centre a DIV Regardless of Screen Size

Use a fixed or percentage width (less than 100%) block level element, set with margin: nn auto; in a full width parent block level container.

Where nn can be any value and dimensioning unit you need.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

RE: Centre a DIV Regardless of Screen Size

(OP)
Thanks Chris, so I need to create an outer DIV? I've attached my whole webpage.

Support Technician in an Educational Environmant

RE: Centre a DIV Regardless of Screen Size

Not necessarily, the 'body' element is a block level element. Just be aware that the document content length may trigger a vertical scroll bar which will reduce the body element by around 20 pixels from the right hand edge.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

RE: Centre a DIV Regardless of Screen Size

I am messing around with responsive design - lol - I am not a designer at all, but I like to learn and I often find myself in a pickle!

Any ways, look at CSS "flex". This is extremely friendly and as the name hences, flexible in turns of centering and expanding containers on the view port.

I think that if properly set/employed, to center a container or object while using flex, all you have to do is set the margin property to "auto".


--
SouthBeach
http://www.fp2php.com
The good thing about not knowing is the opportunity to learn - Yours truly, 2008.

RE: Centre a DIV Regardless of Screen Size

Quote:

all you have to do is set the margin property to "auto".

So exactly the same way you can without using some 'library' then.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

RE: Centre a DIV Regardless of Screen Size

It's just the way you described it as CSS "flex" made it appear as if you were talking about some 'bolt on' rather than the CSS3 property 'flex'.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

Never mind this jesus character, stars had to die for me to live.

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close