Vertically Center Content - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Vertically Center Content

cjiggens

7:10 am on May 19, 2011 (gmt 0)

10+ Year Member

I have tried so many different ways of centering that i am totally the stumped currently when i publish this code its not centered vertically but horizontally it is, I need it to be centered in the page. vertical align middle nothing seems to be working, any help is greatly appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0");
</script>
<style type="text/css">

#content {
margin: 0 auto;
}

#mainflash {
z-index: 1;
position: relative;
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>

<div id="content">

<div id="mainflash">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%
2Fwww.facebook.com;layout=box_count&amp;show_faces=false&amp;width=150
&amp;action=like&amp;font&amp;colorscheme=light&amp;height=65" 
scrolling="no" frameborder="0" style="right: 15px; top: 100px; width: 
75px; height: 65px; z-index: 999; position: absolute; overflow: 
hidden;" allowtransparency=;"false" ; border:none; overflow:hidden;></iframe>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
width="1000" height="600" id="myFlashContent">
<param name="movie" value="myswf.swf" />
<param name="wmode" value="opaque" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myswf.swf" width="1000" height="600">
<param name="wmode" value="transparent" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

</div> 

</div>
>
</body>
</html>

[edited by: alt131 at 11:49 am (utc) on May 19, 2011]
[edit reason] Side Scroll [/edit]

lucy24

7:43 am on May 19, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Simplistic answer: a thing can only be centered (or left/right aligned) if it's inside of another thing. Contents of table cells can be centered both ways because the cell has four walls. Anything, anywhere, can be centered horizontally, because at a minimum it's inside of the body, which has a fixed width. But the body has no height; like a scroll, it goes on forever.

When you say "page" do you mean screen? If so, you can get its height either through css or javascript. There's a recent-ish thread about bottom-aligning a footer on wide screens; the underlying principle is the same, so try to dig it up.

cjiggens

3:44 pm on May 19, 2011 (gmt 0)

10+ Year Member

I am not using tables, I am using divs, and i know if i change my mainflash div to relative absolute than do a top 50% and a bottom %50 but it doesnt work.its pushing upward not staying in the middle.

any other help

alt131

3:44 pm on May 19, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Welcome to WebmasterWorld cjiggens :)

You're almost there! SuzyUK wrote a guide to Vertical Centre with css [webmasterworld.com] that could easily be adpated to your layout. It is older, but the issues are much the same, and includes explanantions and sample code to help decide which works best for your situation.

Just be aware that 1000x665 is reasonably large. So if you choose the position:absolute/negative margin technique, just check it doesn't "pull" the element offscreen if the user has a smaller viewport.

[Edit] Ooops! Cross-post. Suzy's guide will help with your last issue as well.

lucy24

4:09 pm on May 19, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

If you're doing anything involving negative margins, be sure to test it on all conceivable browsers, especially any and all versions of MSIE. Some browsers have been known to eat the overflowing text. (Personal experience.) It should not be an issue if the margin is used purely for positioning and will never contain any visible content, but don't take chances.

alt131

4:55 pm on May 19, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Some browsers have been known to eat the overflowing text. (Personal experience.)

Hmmmmmm ... Note to self: Feed browsers twice daily.

Being serious, the issue of elements being "pulled" off screen is a result of conforming browsers behaving as directed. Definitely not an issue limited to a particular type.

Testing is critical but few organisations have the resources to maintain test suites of all conceivable browsers, and understandably as the majority will never be seen anymore. Testing by likely engine and platform is more achievable and useful. Plus recognising visual browsers are not the only user agents, and accommodating other devices.

cjiggens

5:26 pm on May 19, 2011 (gmt 0)

10+ Year Member

So by putting another div called wrapper is my solution giving it relatative position and giving my content a absolute position?

rocknbil

6:02 pm on May 19, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

An old simplified example: Dead Centre [wpdfd.com]

Not that this implementation starts to fall off the left of the page if 1) the object is a fixed width, such as a X00px wide layout, and 2) you unhinge the browser from maximized and make it really small. This gets important on mobile devices. But the vertical part works fine.

So that's a big yes. :-)

lucy24

8:57 pm on May 19, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Being serious, the issue of elements being "pulled" off screen is a result of conforming browsers behaving as directed. Definitely not an issue limited to a particular type.

I mean that if you have a negative margin as part of the definition of a text area (don't know what normal people use this for, but it's one of my three ways of setting up sidenotes), some browsers will "white-out" the part that's on the wrong side of its margin. Even if the whole thing fits nicely on the screen.

None of my current browsers does it, so it may have been an MSIE 6 issue. But in the course of testing I discovered an(other) annoying behavior on the part of Opera, so I don't consider my time wasted ;)

alt131

12:08 am on May 22, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

@cjiggens Did those suggestions help? ... and ignore the following - you've just raised an interesting point from times gone by ;)

I mean that if you have a negative margin as part of the definition of a text area some browsers will "white-out" the part that's on the wrong side of its margin. Even if the whole thing fits nicely on the screen. ... may have been an MSIE 6 issue

Interesting issue Lucy, but note the example was specific to negative margins plus absolute positioning.

. ie6 will "clip" a non-positioned element that has been negatively margined outside it's containing block. recalling css2 provides for "implementation-specific limits" on negative margin values, that an element "may" overflow it's containing block, and that overflow "may" be rendered outside the containing block. Those "maybe's" make it hard to say it is wrong.

Plus there is some logic to clipping to the containing block - if an element needs to be drawn outside the container, why is it inside the container in the first place? That doesn't occur if the element is positioned as well as margined, which on the logic of the time, also makes sense.