Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7

Thread: centered divs

  1. #1
    Senior Member
    Join Date
    Aug 2006
    Posts
    131
    Member #
    13656
    Hello all,
    I am sure that this simple question has been answered a few times before, but I haven't been able to find it while searching the web or this forum. I am wondering how to create centered layers (divs) using CSS... I have recently realized how horrible tables are for layouts and am trying to quickly get away from them. The only thing I can't figure out is how to center them on the page. For example, this website usings CSS layers but they aren't centered and it drives me nuts! Please help a mad man out.

    ~darknail
    Christopher Carvache
    Web Developer / SEO
    Northeast Web Design
    +1.860.906.7802

  2.  

  3. #2
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    A div can be centered inside a parent div by setting [minicode]margin: 0 auto;[/minicode] on it in CSS. That should pretty much do it for you.

  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,720
    Member #
    5580
    Liked
    718 times
    Make sure to give us a link.

    If we can see what you're doing, we can help much better.


  5. #4
    Junior Member ajlozier's Avatar
    Join Date
    Aug 2006
    Posts
    7
    Member #
    13704
    it might also be a good idea to use a text-align: center; declaration for the parent element, to accomodate older browsers that do not recognize the auto margin property.

    let us know how it goes and post a link!

  6. #5
    Senior Member
    Join Date
    Aug 2006
    Posts
    131
    Member #
    13656
    Okay so I still seem to be having problems... I am using dreamweaver ultradev 4 because the company I work for hasn't upgraded in forever. The code that dreamweaver generates looks like this:
    <div id="pad" STYLE="position:absolute; left:67px; top:24px; width:592px; height:1119px; z-index:1">
    Okay so its pretty basic; CSS formatting without an external CSS file. This is only 1 of the several divs that I have nested inside of the container div. The container div looks like this
    <div id="container" STYLE="margin: 0px auto; width:831px;">
    That should center the container div on the entire page right? Well why the heck doesn't it? Let me know...

    ~darknailblue
    Christopher Carvache
    Web Developer / SEO
    Northeast Web Design
    +1.860.906.7802

  7. #6
    Senior Member
    Join Date
    Aug 2006
    Posts
    131
    Member #
    13656
    Okay so I still seem to be having problems... I am using dreamweaver ultradev 4 because the company I work for hasn't upgraded in forever. The code that dreamweaver generates looks like this:
    <div id="pad" STYLE="position:absolute; left:67px; top:24px; width:592px; height:1119px; z-index:1">
    Okay so its pretty basic; CSS formatting without an external CSS file. This is only 1 of the several divs that I have nested inside of the container div. The container div looks like this
    <div id="container" STYLE="margin: 0px auto; width:831px;">
    That should center the container div on the entire page right? Well why the heck doesn't it? Let me know...

    ~darknailblue
    Christopher Carvache
    Web Developer / SEO
    Northeast Web Design
    +1.860.906.7802

  8. #7
    Junior Member ajlozier's Avatar
    Join Date
    Aug 2006
    Posts
    7
    Member #
    13704
    Quote Originally Posted by darknailblue
    Okay so I still seem to be having problems... I am using dreamweaver ultradev 4 because the company I work for hasn't upgraded in forever. The code that dreamweaver generates looks like this:
    <div id="pad" STYLE="position:absolute; left:67px; top:24px; width:592px; height:1119px; z-index:1">
    Okay so its pretty basic; CSS formatting without an external CSS file. This is only 1 of the several divs that I have nested inside of the container div. The container div looks like this
    <div id="container" STYLE="margin: 0px auto; width:831px;">
    That should center the container div on the entire page right? Well why the heck doesn't it? Let me know...

    ~darknailblue
    on your container div, change the style to:

    STYLE="margin-left: auto; margin-right: auto; width: 831px;"

    if this still does not work, post a link to the page you're working on and i'll have a look at it.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:25 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com