Web Analytics Made Easy -
StatCounter Vertical centering (non-fixed width) - CodingForum

Announcement

Collapse
No announcement yet.

Vertical centering (non-fixed width)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Vertical centering (non-fixed width)

    Hi there, I'm new here, this looks like a good place to ask my questions

    I am trying to vertically and horizontally center a site, I have managed to do it in Firefox, however I have problems in IE and large margins are added either side.

    This is the guide I have been using:
    http://www.vdotmedia.com/blog/vertic...tent-with-css/
    ...but I still get problems with IE.



    Could someone look at my code and see what I can do to fix it?

    Thanks,

    XSapphire
    Last edited by XSapphire; Apr 14, 2009, 09:00 PM.

  • #2
    I don't believe there is any direct way to vertically center an element on a page with only CSS and HTML. You may want to consider obtaining the client's window height through a different language (such as Javascript) and then using a width / 2 for the vertical spacing offset.

    http://www.softcomplex.com/docs/get_..._position.html

    Not sure if this helps. Best of luck.

    Comment


    • #3
      I'd rather not use javascript or another language to achieve this. Surely it must be possible, according to that guide it is but it doesn't seem to work.

      Comment


      • #4
        It's quite easy:

        Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        
        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
        <head>
        	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        
        	<title>Vertical Centering</title>
        	
        	<style type="text/css">	
        	
        		#wrap {
        			[B]position:absolute;[/B]
        			[B]height:300px;[/B]
        			[B]width:500px;[/B]
        			padding:10px;
        			border:2px solid #ccc;
        			[B]left:50%;[/B]
        			[B]top:50%;[/B]
        			[B]margin:-162px 0 0 -262px;[/B]
        			font:0.8em arial, sans-serif;
        		}
        	
        	</style>
        	
        </head>
        
        <body>
        
        	<div id="wrap">
        	
        		This is the vertically-centered container.
        	
        	</div>
        	
        </body>
        </html>
        The example above contains the general principle: Absolutely position a fixed-dimension box 50% from the top and the sides of the browser window (centered, in other words), then "back it off" half its width and height using negative margins.

        It's much simpler than mucking about with all the display:table-cell nonsense.

        The only downside is that you lose some content at very low browser window sizes; however, there's a JS fix for that. The design site linked to in my sig makes use of it.

        Hope that helps!
        matt | design | blog

        Comment


        • #5
          Originally posted by XSapphire View Post
          I'd rather not use javascript or another language to achieve this. Surely it must be possible, according to that guide it is but it doesn't seem to work.
          Looking at the guide, I noticed that it encases everything within a table, in which case it is entirely possible to vertically align something. I tend to stray away from tables, however; they're quite annoying to deal with.

          Also, a question. Why don't you include the <--[if IE] section in the actual CSS script, instead of using a source link then adding that?
          Last edited by Shinykirby; Apr 14, 2009, 01:24 PM.

          Comment


          • #6
            Originally posted by msuffern View Post
            It's quite easy:

            Code:
            snip
            The example above contains the general principle: Absolutely position a fixed-dimension box 50% from the top and the sides of the browser window (centered, in other words), then "back it off" half its width and height using negative margins.

            It's much simpler than mucking about with all the display:table-cell nonsense.

            The only downside is that you lose some content at very low browser window sizes; however, there's a JS fix for that. The design site linked to in my sig makes use of it.

            Hope that helps!
            @ Shinykirby: I didn't realise you can

            The problem with that is I need to center a non-fixed width div... how can I do that? Look at my code, how can I center that?

            Comment


            • #7
              Originally posted by XSapphire View Post
              The problem with that is I need to center a non-fixed width div... how can I do that? Look at my code, how can I center that?
              Maybe I'm not seeing the forest for the trees here, but in the link you posted, your box has a fixed width:

              Code:
              #box {
              	background-color:#333333;
              	[B][COLOR="Red"]width: 600px;[/COLOR][/B]
              	margin: 0 auto 0 auto;
              	padding: 0px 7px 7px 7px;
              	border: 3px white solid;
              	color: white;
              }
              I assume you mean non-fixed height?

              In any case, your scrollbar issues in FF and Safari are coming from the fact that you haven't reset your browser defaults. Add this to the beginning of your CSS:

              Code:
              * {
              	padding:0;
              	margin:0;
              }
              And your IE issues stem from the fact that when absolutely positioning things, IE really likes to have both directions specified. Add this to your conditional CSS:

              Code:
              #position { 
              	position: absolute; 
              	top: 50%;
              	[B]left:0;[/B]
              }
              For the record, this whole technique is a major hack, and I would rethink my page design before I implemented any of it. It's like trying to teach an old dog (table-based layout design) new tricks (semantic, table-less layout). New (and better) ways of doing things require new paradigms.
              matt | design | blog

              Comment


              • #8
                Hi msuffern,

                Yes I did mean fixed-height sorry.

                Thanks for posting how to sort it, and the scrollbar issue was going to be another question It all works fine now.

                For the record, this whole technique is a major hack, and I would rethink my page design before I implemented any of it. It's like trying to teach an old dog (table-based layout design) new tricks (semantic, table-less layout). New (and better) ways of doing things require new paradigms.
                So from this I take it that you are suggesting a page redesign to avoid using the hack. What would you suggest for my page? (fixed-height or...?)

                Comment


                • #9
                  Originally posted by XSapphire View Post
                  So from this I take it that you are suggesting a page redesign to avoid using the hack. What would you suggest for my page? (fixed-height or...?)
                  I take that back; it's a minor hack given that it doesn't overtly disregard the semantics of the HTML. I think the tone of my reply was driven by the amount of time it took me to track down the dumb IE issue. I was just bitter. Live and learn...

                  For the record, every designer has their "limit" when it comes to incorporating hacks and bending the the semantics of the code a bit to fit their design intent. Some designers stick to the strict meaning of the code elements and use hardly any workarounds; others will say "if it works, use it" and use tables for layout and all manner of HTML tags in ways that diverge from their meaning. I lean toward the former position for a number of reasons I won't get into here.

                  All that said, the hack in this thread is kind of extensive just to allow the box to expand vertically with the content. It just doesn't seem like a good functionality / code bloat trade-off. I guess that's my major issue with it. As far as deciding whether an alternative approach would be preferable and if so, which one, that all depends on what your site is doing and the context of the page.
                  Last edited by BoldUlysses; Apr 14, 2009, 04:47 PM.
                  matt | design | blog

                  Comment


                  • #10
                    Okay, thanks for all the help matt

                    Comment


                    • #11
                      the easiest way for me, that works on all browsers is to make a div, #container and put that around everything. then do as follows:
                      Code:
                      body {
                           text-align: center;
                      }
                      
                      #container{
                           text-align: left;
                      }
                      works like a charm
                      Free PSD to XHTML/CSS conversion - Dimby.net
                      Which doctype should I use?

                      Comment


                      • #12
                        Originally posted by Camron467 View Post
                        the easiest way for me, that works on all browsers is to make a div, #container and put that around everything. then do as follows:
                        Code:
                        body {
                             text-align: center;
                        }
                        
                        #container{
                             text-align: left;
                        }
                        works like a charm
                        Isn't that horizontal centering?

                        Comment

                        Working...
                        X