Div not centering on Safari/iPad - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Div not centering on Safari/iPad

IntegrityWebDev

9:33 pm on Mar 11, 2011 (gmt 0)

10+ Year Member

I'm wondering if this is a glitch of some kind...I have a page I'm working on that has a centered div called "wrapper" and under that another centered div called "footertext". Both are positioned relative, with wrapper having absolute divs in it...footertext only has text in it.

This renders out correctly everywhere I've tried it except Safari/iPad (I dont have an iPhone to try it). It looks fine in Safari Win/Safari Mac.

On Safari/iPad the 2nd div "footertext" is not centering, but rather left aligned.

Here is the code for the divs:


<div id="wrapper">
<!-- LOTS OF ABSOLUTELY POSITIONED DIVS HERE -->
</div>
<div id="footertext">
<h2>I header here</h2>
<p>Some Text Here</p>
</div>

Here is the CSS for those 2 divs:


#wrapper {
height: 804px;
width: 1258px;
margin: auto;
position: relative;
background-image: url(../images/backgrounds/signup.jpg);
background-repeat: no-repeat;
background-position: center top;
clear: both;
}
#footertext {
color: #FFF;
width: 760px;
font-size: 16px;
line-height: 20px;
margin-top: 150px;
margin-right: auto;
margin-bottom: 100px;
margin-left: auto;
position: relative;
height: 150px;
clear: both;
}

Any thoughts on why this might be?

Thanks,
Chris

alt131

1:22 pm on Mar 12, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Hi Chris, unfortunately I can't test, but the code does not display as described in winSafari5, or any other browser, so that may give some clues about why it is not displaying as desired on other devices.

#footertext displays horizontally centred based on the width of the viewport. To test, set a border.
So I wonder if you mean the h1 and <p> are not centred. If so, this is a quick way to centre the contents:
#footertxt * {
text-align:center;
OR
margin:0 auto;
}

However, #footertext is not horizontally centred in relation to #wrapper when the viewport is narrower than the 1258px width set for #wrapper - so I woidner if that is what you meant.
In that case there are two options - depending on the rest of your code. One, set the width of #footertext the same width as #wrapper. If you need, use padding or marging to confine the contents to the current 750px width.
For example,
1258-760=508 /2 =254, so set #footertext width:1258 and margin or padding-left/right: 254px.

Another option is to set the "containing" (parent) element for #wrapper and #footertext to be at least the same width as #wrapper. In my code sample code that was body, but if you have lots of nested divs that may not be the case.

SuzyUK

3:19 pm on Mar 12, 2011 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

However, #footertext is not horizontally centred in relation to #wrapper when the viewport is narrower than the 1258px

yep it's not inside the wrapper so it's margins are auto'ing on the viewport.. the wrapper div does not "stretch" the body element it overflows it, so the body needs to know to stay wide enough to "contain" it if the rest of the elements are working off the same width

setting a min-width on the body element - possibly the same as the wrapper width - should do it too - a fixed width as suggested by alt, will do it too, but it will stop the centering of all the divs working if viewed on a larger screen as the body might then be smaller than the screen width - min-width should only restrict it one way and you might still want the body to be as wide as possible when available.

IntegrityWebDev

1:09 pm on Mar 14, 2011 (gmt 0)

10+ Year Member

Sorry, I may not be explaining it well and due to confidentiality there is a whole lot of stuff in there that I have to take out before I could show it but here is what I'm trying to get:


<div id="wrapper">
A lot of stuff inside this div that is abs. positioned
</div>


<div id="footer">
This is centering correctly everywhere but Safari/iPad
</div>

I have tested on Win 7: IE8, IE compat. mode, FF, Chrome, Safari, Android, Mac/Safari and all are good...it is only iPad where this is not working.

In a nutshell, I have 2 divs that should be independent of each other and I want both to center. On both I have set a height and width and margins are auto but its not working on the ipad.

IntegrityWebDev

1:29 pm on Mar 14, 2011 (gmt 0)

10+ Year Member

I created a whole new page without all my content, but the 2 divs match all of the settings of my others, and I can replicate the problem on the iPad. Both divs should be horizontally centered and they do everywhere but the iPad:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=yes" /> 
<title>Untitled Document</title>
<style type="text/css">
#div1 {
height: 804px;
width: 1258px;
margin: auto;
position: relative;
clear: both;
background-color:#CCC;
}
#div2 {
background-color:#CFC;
color: #FFF;
width: 760px;
font-size: 16px;
line-height: 20px;
margin-top: 150px;
margin-right: auto;
margin-bottom: 100px;
margin-left: auto;
height: 170px;
clear: both;
border: 1px solid #9F0;
}
</style>
</head>

<body>
<div id="div1">
This should center horizontally
</div>
<div id="div2">
This should also center horizontally
</div>
</body>
</html>

IntegrityWebDev

3:36 pm on Mar 14, 2011 (gmt 0)

10+ Year Member

Even though I think it still may be an indicator of an iPad/iPhone/Safari bug, I fixed the problem by:
#1: Giving the body tag an AUTO margin
#2: Adding a wrapper to the whole thing that was the width of my biggest div. Not sure I *SHOULD* have to do that but I did and it works...so I'm happy. :-)