Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2006
    Posts
    231
    Thanks
    9
    Thanked 1 Time in 1 Post

    Dynamic Height Div

    Hey all,

    Made a not-so-common layout for one of my sites. It's about 300px high and 100% wide. SInce its a Horizontal page, I want it to be centered in the browser.

    I was thinking of putting 3 divs, being that the middle one has a static height and the other two have the difference split in two in order to keep the middle div centered vertically.

    any ideas on how?

  • #2
    Regular Coder PremiumBlend's Avatar
    Join Date
    Apr 2006
    Location
    Marion, Iowa
    Posts
    201
    Thanks
    0
    Thanked 13 Times in 13 Posts
    This should work for you. You must use this Doctype or it won't work in IE 7.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <body style="margin:0;padding:0;">
    <div style="height: 300px; width: 600px; margin: 0 auto; background-color: gainsboro;">Test</div>
    </body>
    </html>
    My Website: DumpsterDoggy

  • #3
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts

    Like this?

    Vertically centred, 100% width? this should work for you...

    Attached html file. Drop the txt extension.
    Attached Files Attached Files

  • #4
    Regular Coder PremiumBlend's Avatar
    Join Date
    Apr 2006
    Location
    Marion, Iowa
    Posts
    201
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Quote Originally Posted by Erindesign View Post
    centered vertically.
    Sorry, I wasn't paying close enough attention I guess.
    My Website: DumpsterDoggy


  •  

    Posting Permissions

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