mozilla extra horizontal space

theotrain · Apr 27, 2008

i made a layout in css that worked fine in IE/mozilla. but my divs werent centering horizontally in safari, so looked for a different method.

i went with negative margins, which worked in all 3 browsers, BUT in mozilla I get a bunch of blank space to the right of the page, and a horizontal scrollbar that allows me to see all that space, even though technically everything fits in the window. presumably this is due to putting everything far to the right with left:50%, then centering it with margin-left:-400px.

any ideas on how to get mozilla to behave, and not "see" a bunch of extra room? or how to horizontally center a div inside another div (relative positioning) that works in all browsers. nothing ive tried works for me.

heres whats causing all the mischief:

[tt]
#container {
background: url(something.png) repeat-y 50% 0;
float:left;
width: 100%;
top: 0;
left: 0;
position: relative;
margin: 0;
text-align:center;
display:table;
}
#content {
left:50%;
margin-left:-400px;
margin-top:0px;
margin-right:auto;
margin-bottom:0px;
float:inherit;
display:table;
width: 800px;
top: 0;
position:relative;
text-align:center;
[/tt]

BillyRayPreachersSon · Apr 27, 2008

If you simply want to center "#content" inside "#container", I'd go with simple auto-margins, which works for me in Fx, Ie, and Safari:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-language" content="en" />
	<title>Centred Div Test</title>

	<style type="text/css">
		#container {
			width: 100%;
			text-align: center;
			background-color: red;
		}
		#content {
			margin: 0px auto;
			text-align: left;
			width: 800px;
			background-color: green;
		}
	</style>	
</head>

<body>
	<div id="container">
		<div id="content">
			<p>Lorum ipsum dolor sit amet...</p>
		</div>
	</div>
</body>
</html>

If you need all that other styling for other purposes, then that may affect the way you can do this, although you've not said if you need those other styles or not...

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

Vragabond · Apr 27, 2008

Indeed, the extra space is there because of the displaced relatively positioned element.

However, I do not understand why you're trying to accomplish such an easy task as horizontally centring an element with such convoluted methods.

An element will be horizontally centred if its left and right margins are set to auto and it has a width that does not exceed (or equal) the width of its parent container. That said, your CSS could look like this:

Code:

#container {
  background: url(something.png) repeat-y 50% 0;
}

#content {
  width: 800px;
  margin: 0 auto;
}

This will work in all modern browsers from IE6 up (IE6+, FF, Safari, Opera, etc.). If you want to support older IE browsers, you will need to work with text-align.

I really suggest that you learn more about CSS, because your code shows little to no understanding of how it works. I would suggest tutorials here:

http://www.htmldog.com/guides/cssbeginner/

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

theotrain · Apr 28, 2008

thanks for the responses. yeah, no doubt when something isnt working i just start throwing attributes at it until it works, and i dont have much css layout experience.

i was shocked to find it so hard to do what i wanted, but after i got the replies, i just started from scratch using vragabonds code and building it from there, and it worked!

after so much failure everything had gotten rather too elaborate, so i dont know what was causing the problem but starting the definitions over helped...

THANK YOU

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

mozilla extra horizontal space

theotrain

Programmer

BillyRayPreachersSon

Programmer

Vragabond

Programmer

theotrain

Programmer

Similar threads

Part and Inventory Search

Sponsor