SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    is't possible to make layout verticaly centered using css

    this question based on thread : website without scrolling or so....

    other people think it was impossible if user open the web using mobilephone(opera mini) or other mini device, but I find it was bit interesting to archive, I maen not 100% no scrolling, I just want my site have no scrolling if I use screen resolution 800x600, so my webpage should have size 720x400. but what happend if people open it with higher resulotion.

    my webpage would look so lame with mini page with so many white space on bottom

    so is there is a way, I just know horizontal vertical using margin: 0px auto

  2. #2
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so its impossible after all??

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you know the exact height of your content, it's possible to make it vertically centred using absolute positioning and a negative top margin.

    In the general case, when the content height is unknown, it's not so easy. You can use display:table-cell and vertical-align:middle, but it won't work in IE7 and older, which makes it less than useful for a general-purpose site.
    Birnam wood is come to Dunsinane

  4. #4
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perhaps difficult with CSS alone, but a little JavaScript can detect the window size and apply styles appropriately.

  5. #5
    SitePoint Addict RussAdams's Avatar
    Join Date
    Jan 2009
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    WebDesign.fm - my web design blog
    Web Design Inspiration Do Follow Blogs


    Follow me on Twitter - Russ Adams

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    If you know the exact height of your content, it's possible to make it vertically centred using absolute positioning and a negative top margin.

    In the general case, when the content height is unknown, it's not so easy. You can use display:table-cell and vertical-align:middle, but it won't work in IE7 and older, which makes it less than useful for a general-purpose site.
    There is a way to use negative percentage offsets with IE6 to get the same result as using table-cell in modern browsers without needing to know the height of the content but it doesn't work with IE7 which still ends up placing the content at the top of the page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or maybe I must wrap entire website using html table and using valign=center :P
    thx for the reply

  8. #8
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It would be middle, there is no center valign

    Can you set a table to 100&#37; height and have that fill the viewport? Unless you can do that, wrapping the page in a table won't make the problem any simpler.

  9. #9
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    There is a way to use negative percentage offsets with IE6 to get the same result as using table-cell in modern browsers without needing to know the height of the content but it doesn't work with IE7 which still ends up placing the content at the top of the page.
    Unless I'm interpreting differently, it's possible and this works fine in IE7/IE6:

    Code:
    <!doctype html>
    <html>
        <head>
    	<title>vertical center</title>
    	<style>
    	    #middle {
    		position:absolute;
    		top:50%;
    	    }
    	    #inner {
    		position:relative;
    		top:-50%;
    	    }
    	</style>
        </head>
    
        <body>
    	<div id="middle">
    	    <div id="inner">
    		test
    	    </div>
    	</div>
        </body>
    </html>
    Edit: Spoke too soon.. this works on relatively simple vertical centering with shrinkwrapping text but its prone to busting with fairly styled contents inside. As a matter of fact I don't even think it's fully centered but gave the impression it was.. so much for that attempt
    Cross browser css bugs

    Dan Schulz you will be missed

  10. #10
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Time to correct myself again. Apparently it IS possible in IE, it's just that the positioning method does not work perfectly in Fx3, so I had assumed I miscalculated in IE when I viewed this in FF. Anyway, here's the final version with table-cell/vertical-align for modern browsers:

    Code:
    <!doctype html>
    <html>
        <head>
    	<title>vertical center</title>
    	<style>
    	* { margin:0; padding:0; }
    	html, body { height:100&#37;; }
    	#outer {
    	    display:table;
    	    height:100%;
    	}
    	#middle {
    	    display:table-cell;
    	    vertical-align:middle;
    	}
    
    	#inside {
    	    background:red;
    	    color:#fff;
    	}
    	</style>
    	<!--[if lte IE 7]>
    	<style>
    	#middle {
    		position: relative;
    		top: 50%;
    		zoom:1;
    	}
    	#inner {
    		position: relative;
    		top: -50%;
    		zoom:1;
    	}
    	</style>
    	<![endif]-->
        </head>
    
        <body>
    	<div id="outer">
    	    <div id="middle">
    		<div id="inner">
    		    <div id="inside">AGH</div>
    		</div>
    	    </div>
    	</div>
        </body>
    </html>
    Cross browser css bugs

    Dan Schulz you will be missed

  11. #11
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    Anyway, here's the final version with table-cell/vertical-align for modern browsers:
    The difference between your solution and the one I worked out that works in everything except for IE7 is that I was only wrapping the content in two divs and not three. It is annoying to have to add an extra div just for that one browser. I am still trying to find a way that works for IE7 with just the two divs that are all that other browsers require in order to do it.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  12. #12
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, you can do it with two:

    Code:
    <!doctype html>
    <html>
        <head>
    	<title>vertical center</title>
    	<style>
    	* { margin:0; padding:0; }
    	html, body { height:100&#37;; }
    
    	#middle {
    	    display:table;
    	    height:100%;
    	    width:100%;
    	    text-align:center;
    	}
    
    	#inner {
    	    display:table-cell;
    	    vertical-align:middle;
    	}
    	</style>
    	<!--[if lte IE 7]>
    	<style>
    	#middle {
    		position: relative;
    		top: 50%;
    		height:auto;
    		zoom:1;
    	}
    	#inner {
    		position: relative;
    		top: -50%;
    		zoom:1;
    	}
    	</style>
    	<![endif]-->
        </head>
    
        <body>
    	<div id="middle">
    	    <div id="inner">
    		test
    	    </div>
    	</div>
        </body>
    </html>
    Cross browser css bugs

    Dan Schulz you will be missed

  13. #13
    SitePoint Member
    Join Date
    Feb 2009
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just for sharing this tutorial cover more about vertical align

    http://blog.themeforest.net/tutorial.../#comment-6222

  14. #14
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    Actually, you can do it with two:
    That was one of the variants that I tried that DOESN'T work for IE7 even though it does work for IE6.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  15. #15
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    That was one of the variants that I tried that DOESN'T work for IE7 even though it does work for IE6.
    My version is fine and dandy on 7.0.5730.13. Could you post your version?
    Cross browser css bugs

    Dan Schulz you will be missed

  16. #16
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    My version is fine and dandy on 7.0.5730.13. Could you post your version?
    Well I just tried your version of the code in my copy of IE7 and it did exactly what all the other things I'd tried did and left the actual content that was supposed to be centred at the top of the page. The only difference from what I'd tried before was the class names I'd used which wasn't going to affect anything.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  17. #17
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Odd. Native copy or standalone?

    Screenshot of that code ( from the snippet in post #12 ) in my IE7.
    Cross browser css bugs

    Dan Schulz you will be missed

  18. #18
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Works fine in IE7 for me as well.

  19. #19
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,604
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by SoulScratch View Post
    Odd. Native copy or standalone?
    Well I did used to have a native copy in my main XP (which I kept up to date) and I've just recently switched to using Microsoft's VPC image so I could upgrade the native copy to IE8. I have had a minor variant of that code since 2004 and have not managed to get it to work in any version of IE7 that I have tried it in since IE7 came out.

    I don't disbelieve that it works for you, just at a complete loss as to why it has never worked when I have tried it with IE7.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

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