4 replies [Last post]
jshallard
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2004-08-23
Posts: 3
Points: 0

I have created three very simple test pages (based on code at end of post). I would like to know why the display seems to break when used with the XHTML doctype declaration?

Test1 (link): layout test with the following doctype: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Test2 (link): layout test with the following doctype: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Test3 (link): same as test2 but with float:left; added;

With the XHTML doctype, why is it necessary to add the float:left to get the layout to display properly? If this is necessary, how can I center the divs - as there is only "float:left" and "float:right" - but no "float:center"?

Thanks for any help

<head>
	<title>Test Div</title>
	<style>
		#inlineInfoBox
		{
			display:inline;
			background-color:#CCCCCC;
			width:150px;
			height:120px;
			margin:5px;
			text-align:center;
		}
	</style>
</head>

<body>
	<div align="center">
		<div ID="inlineInfoBox">
			<h2 class="center">Test Div 1</H2>
			Test test test test
		</div>
		<div ID="inlineInfoBox">
			<h2 class="center">Test Div  2</H2>
			Test test test test
		</div>
		<div ID="inlineInfoBox">
			<h2 class="center">Test Div  3</H2>
			Test test test test
		</div>
	</div>
</body>
</html>

dradon
Offline
newbie
Last seen: 16 years 15 weeks ago
Timezone: GMT-5
Joined: 2004-08-20
Posts: 9
Points: 0

&quot;display:inline&quot; behavior with different Doctypes

One problem I see that may cause some strange behavior is that you're trying to use width and height on inline elements, which isn't valid. If you look at those pages with Firefox they look drastically different. Do you really need to make those divs inline?

jshallard
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2004-08-23
Posts: 3
Points: 0

&quot;display:inline&quot; behavior with different Doctypes

The reason I made the divs inline and floating is because I wanted to specify the height and width of the div, and also center them.

Is there any way to do this without using inline divs?

_janim
Offline
Regular
phinland
Last seen: 16 years 25 weeks ago
phinland
Joined: 2004-06-08
Posts: 22
Points: 0

&quot;display:inline&quot; behavior with different Doctypes

Create a 100% wide container div which has a text-align:center property. Make the inside divs float without the display:inline property. That gives you a chance to specify widths and heights.

Yes, I agree it would ne nice to achieve the same effect a little easier, but at least I can't come up with anything much simplier.

#container {
   text-align: center;
}
div.infobox {
  float: left;
  width: px;
  height: px;
}

<div id="container">
   <div class="infobox">1</div> 
   <div class="infobox">2</div>
</div>

Note that you can only use one element per id. The example you've given has three divs with the same id.

Please Provide a link to your code/site. If you can't, then please at least provide the HTML & CSS together.

jshallard
Offline
newbie
Last seen: 16 years 14 weeks ago
Joined: 2004-08-23
Posts: 3
Points: 0

Thanks

Thanks for the info Cool