www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 21

Thread: <div> centrally positioned?

  1. #1
    Join Date
    Jan 2007
    Location
    Springfield, MO
    Posts
    68

    <div> centrally positioned?

    Very easy quesion, but I can't find an answer...

    How do I position a <div></div> centrally? I have the following css stylesheet, where div.container is to be positioned centrally on the page:

    html {
    height : 100%;
    }
    body {
    height: 100%;
    background-color : #ffffff;
    margin : 0;
    font-family: Verdana;
    font-size: 11px;

    }
    div.container {
    height:100%;
    width: 80%;
    }


    Thank you.

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    Code:
    div.container {
    height:100%;
    width: 80%; 
    position: absolute;
    left: 10%;
    }

  3. #3
    Join Date
    Sep 2006
    Location
    Europe
    Posts
    174
    position absolute is an interesting way, a more appropriate way is
    Code:
    div.container {
    width: 80%;
    margin: auto;
    }

  4. #4
    Join Date
    May 2005
    Posts
    2,040
    In most cases, Taschen's way is the preferred way.

  5. #5
    Join Date
    Jan 2007
    Location
    Springfield, MO
    Posts
    68
    Thanks. It worked!

    I still have one question: why is my <div.container> still positioned left in Design Mode in FrontPage, whereas, when being viewed in a browser, the DIV is positioned centrally???

    Thanks.

  6. #6
    Join Date
    Jan 2007
    Location
    Cambridge, England
    Posts
    166
    put text-align:center; in the body css. that usually fixes some problems with margin: 0 auto;

  7. #7
    Join Date
    Nov 2002
    Posts
    4,473
    Quote Originally Posted by drhowarddrfine
    In most cases, Taschen's way is the preferred way.
    As long as there isn't any other content destined for the dead space.

  8. #8
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    ...I still have one question: why is my <div.container> still positioned left in Design Mode in FrontPage, ...
    Does this page have a valid !doctype statement before the opening "<html>"? If not, this may be why..
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

  9. #9
    Join Date
    Jan 2007
    Location
    Springfield, MO
    Posts
    68
    Is there a way to control <span> width? I am trying to do away with tables and cells, and so I have something like this:

    <div style="width:100%;">
    <span style="width:50%;">hello</span>
    <span style="width:50%;">hello</span>
    </div>

    Unfortunately, <span> width doesn't work that way, but I need a way to have control over that. Please advise!

    Thank you.

  10. #10
    Join Date
    Dec 2006
    Location
    Samsara
    Posts
    155
    Quote Originally Posted by andkhl
    I still have one question: why is my <div.container> still positioned left in Design Mode in FrontPage, whereas, when being viewed in a browser, the DIV is positioned centrally???
    Like Dreamweaver, the Frontpage design view isn't an exact science. Pay very little attention to it. If it validates and displays correctly in browsers, that's all that matters.

    Cheers,
    D.

  11. #11
    Join Date
    Jan 2007
    Location
    Springfield, MO
    Posts
    68
    Thank you guys for your replies. Could anybody answer my question about <span> width please?

  12. #12
    Join Date
    Jan 2007
    Location
    Cambridge, England
    Posts
    166
    In your example i would use two more divs rather than the two spans. Span should be used for styling short bits of text i.e a line in a paragraph.

  13. #13
    Join Date
    Jan 2007
    Location
    Springfield, MO
    Posts
    68
    Quote Originally Posted by roondog
    In your example i would use two more divs rather than the two spans. Span should be used for styling short bits of text i.e a line in a paragraph.
    I've tried using two DIVs, but the problem is they do not stay in place side by side (on one line visually), but rather the second DIV jumps below the first one. There has to be a way to keep them in horizontally aligned visually speaking, it it just I don't know how to do that. Would you explain how to do that? Thank you.

  14. #14
    Join Date
    Jan 2007
    Location
    Cambridge, England
    Posts
    166
    float one left and one right.
    e.g
    <div style="width:50%;float:left;"></div>
    this should work

  15. #15
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    Thank you guys for your replies. Could anybody answer my question about <span> width please?
    Span is an inline element which means it has no width other than the width of its content.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles