5 replies [Last post]
MaxJ
Offline
Regular
Last seen: 11 years 16 weeks ago
Joined: 2003-08-28
Posts: 36
Points: 0

I'm interested in a solution to this problem. When centering a box the layout is fine unless you resize the browser window to less than the width of the box. In IE6 it is (mostly) ok, but in Netscape 7 and Opera 6 they both have the same problem. (Using Windows ME.) The left part of the box disappears off the left edge of the screen and is not visible and can't be scrolled to. This is a major flaw that makes doing a fixed pixel width layout unworkable. Only using a width as a percentage of the containing blcok works. Anyone know any more about this bug or a good workaround?

I'm interested in strict HTML4 solutions, otherwise I might as well just do it as a table!

Thanks,

Max

Test code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test file: centre block</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#Bem {
 width: 40em;
 margin-left:auto; margin-right:auto;
 color: #000; background-color: #ccf;
}
#Bex {
 width: 80ex;
 margin-left:auto; margin-right:auto;
 color: #000; background-color: #cfc;
}
#Bpx {
 width: 600px;
 margin-left:auto; margin-right:auto;
 color: #000; background-color: #fcc;
}
#Bpercent {
 width: 80%;
 margin-left:auto; margin-right:auto;
 color: #000; background-color: #99f;
}
#Bcm {
 width: 15cm;
 margin-left:auto; margin-right:auto;
 color: #000; background-color: #9f9;
}
#Brelative_px {
 position: relative;
 width: 600px;
 margin-left:auto; margin-right:auto;
 color: #000; background-color: #f99;
}
#Babsolute_px {
 position: absolute;
 left: 50%;
 margin-left: -300px;
 width: 600px;
 color: #000; background-color: #9cf;
 overflow: visible;
}
</style>
</head>
<body>
normal body text
<div id="Bem"><p>Centre normal flow box, (relative) width in em</p></div>
normal body text
<div id="Bex"><p>Centre normal flow box, (relative) width in ex</p></div>
normal body text
<div id="Bpx"><p>Centre normal flow box, (relative) width in pixels</p></div>
normal body text
<div id="Bpercent"><p>Centre normal flow box, width as percentage of containing block</p></div>
normal body text
<div id="Bcm"><p>Centre normal flow box, (absolute) width in cm</p></div>
normal body text
<div id="Brelative_px"><p>Centre relatively positioned box, (relative) width in pixels</p></div>
normal body text
<div id="Babsolute_px"><p>Centre absolutely positioned box, (relative) width in pixels</p></div>
normal body text
</body>
</html>
[/code]

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 3 years 28 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Center block, resize browser bug

Hi,

I don't whether this technique will be useful but relies on treating the div like a table. Fortunately Mozilla recognises display-table-cell but IE doesn't.

So something like this might work for newer browesrs.:

<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
h1 {
	width:300px;
	margin:0 auto;
	background-color: #FFFFCC;
}
htm>body .inner { display: table-cell;}
html>body .outer { position: fixed; left: 0; right: 0; display: table;margin:0 auto }

</style>
</head>

<body>
<div class="outer">
   	<div class="inner">
 		<h1>hello hello hello hello</h1>   
	</div>
</div>

</body>
</html>

It's basically turning the outer div into a table and the inner div into a table cell so you get it to behave like a table but with css.

The style is hidden from IE by using the child selector which ie doesn't understand. (I can't remember where I saw this but someone else deserves the credit.)

Hope it's of some use anyway.

Paul

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 3 years 28 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Center block, resize browser bug

Hi,

Here's a much easier solution that I'd forgotton about. It's so simple it's not true. Just add a border to the element and all your tests will centre except of course for the last one with the negative margin. If you don't want the borders to show you can colour them the same colour as the background etc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Test file: centre block</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<style type="text/css"> 
#Bem { 
 width: 40em; 
 margin-left:auto; margin-right:auto; 
 color: #000; background-color: #ccf; 
 border:1px solid #BFBFBF;

} 
#Bex { 
 width: 80ex; 
 margin-left:auto; margin-right:auto; 
 color: #000; background-color: #cfc; 
 border:1px solid #BFBFBF;

} 
#Bpx { 
 width: 600px; 
 margin-left:auto; margin-right:auto; 
 color: #000; background-color: #fcc; 
 border:1px solid #BFBFBF;

} 
#Bpercent { 
 width: 80%; 
 margin-left:auto; margin-right:auto; 
 color: #000; background-color: #99f; 
 border:1px solid #BFBFBF;

} 
#Bcm { 
 width: 15cm; 
 margin-left:auto; margin-right:auto; 
 color: #000; background-color: #9f9; 
 border:1px solid #BFBFBF;

} 
#Brelative_px { 
 position: relative; 
 width: 600px; 
 margin-left:auto; margin-right:auto; 
 color: #000; background-color: #f99; 
 border:1px solid #000 ;

} 
#Babsolute_px { 
 position: absolute; 
 left: 50%; 
 margin-left: -300px; 
 width: 600px; 
 color: #000; background-color: #9cf; 
 overflow: visible; 
 border:1px solid #BFBFBF;

 } 
</style> 
</head> 
<body> 
normal body text 
<div id="Bem"><p>Centre normal flow box, (relative) width in em</p></div> 
normal body text 
<div id="Bex"><p>Centre normal flow box, (relative) width in ex</p></div> 
normal body text 
<div id="Bpx"><p>Centre normal flow box, (relative) width in pixels</p></div> 
normal body text 
<div id="Bpercent"><p>Centre normal flow box, width as percentage of containing block</p></div> 
normal body text 
<div id="Bcm"><p>Centre normal flow box, (absolute) width in cm</p></div> 
normal body text 
<div id="Brelative_px"><p>Centre relatively positioned box, (relative) width in pixels</p></div> 
normal body text 
<div id="Babsolute_px"><p>Centre absolutely positioned box, (relative) width in pixels</p></div> 
normal body text 
</body> 
</html> 

Works in Mozilla 1.2 : NN6.2 : Opera 7: Ie6

Hope that helps.

Paul

MaxJ
Offline
Regular
Last seen: 11 years 16 weeks ago
Joined: 2003-08-28
Posts: 36
Points: 0

Should be good enough

Hi Paul,

Thanks for the two solutions. The first one sounds a bit of a hack too far but the second seems to work well enough for what I want to do. I can't see many problems, although if there is a need to have background images behind the borders it would end up looking a bit awful in all browsers.

Max

Pob
Offline
Enthusiast
Hampshire UK
Last seen: 3 years 28 weeks ago
Hampshire UK
Timezone: GMT+1
Joined: 2003-08-16
Posts: 60
Points: 5

Center block, resize browser bug

Hi,

As its only for mozillas benefit you could use the child selector to hide it from IE then use transparent which will let the background image show through and just use the border on the left.

e.g.

html>body #Bem {border-left:1px solid transparent;}

Hope that helps.

Paul

lauren
Offline
Regular
Last seen: 10 years 15 weeks ago
Joined: 2004-09-06
Posts: 19
Points: 0

thanks!

After spending half a day searching for a solution on a little thing like the left margin dissappering when you resize a window - I come across this little beauty... who would have thought - adding borders!

thank you! Laughing out loud