XHTML compliant div align substitute [SOLVED]

SMC · 07-05-2007, 06:20 AM

Hello everyone,

Basically I have a perfect working DIV layer when it has <div align="center"></div>. Unfortunatly, that isn't XHTML compatible. I'm looking for an alternative I can use to get that green rectangle back.

Heres what I've got right now:

Code:

<div id="results_div" style="display: none; float: center; text-align: center; margin: auto;">
		<div class="rectangle gray register_error">
			<span id="results_span"></span>
		</div>
	</div>

The initial div is right I'm trying to get centered, unfortunatly everything shoots off to the left. I thank you for any help you can offer!

VIPStephan · 07-05-2007, 07:01 AM

To center the inline-level content of a block-level element use text-align: center;
To center a block-level element itself apply a width and use margin: auto; (important is that left and right margins are set to auto, top and bottom can be any value).

There is no value center for the float property, only left or right.

Oh and I encourage you to use semantic HTML and this includes class names and IDs with functional names, i.e. names that reflect the function of the element, not the (alleged) look. <div class="gray"> means nothing if you intend to change the color to blue at some time (same goes for “rectangle”) whereas <div class="results"> would be the correct way.

SMC · 07-05-2007, 03:15 PM

Worked like a charm, thanks!

07-05-2007, 06:20 AM	PM User \| #1
SMC New Coder Join Date: Jun 2007 Location: Orlando, FL Posts: 60 Thanks: 5 Thanked 2 Times in 2 Posts	XHTML compliant div align substitute [SOLVED] Hello everyone, Basically I have a perfect working DIV layer when it has <div align="center"></div>. Unfortunatly, that isn't XHTML compatible. I'm looking for an alternative I can use to get that green rectangle back. Heres what I've got right now: Code: <div id="results_div" style="display: none; float: center; text-align: center; margin: auto;"> <div class="rectangle gray register_error"> <span id="results_span"></span> </div> </div> The initial div is right I'm trying to get centered, unfortunatly everything shoots off to the left. I thank you for any help you can offer!

07-05-2007, 07:01 AM	PM User \| #2
VIPStephan Senior Coder Join Date: Jan 2006 Location: Halle (Saale), Germany Posts: 3,876 Thanks: 3 Thanked 322 Times in 308 Posts	To center the inline-level content of a block-level element use text-align: center; To center a block-level element itself apply a width and use margin: auto; (important is that left and right margins are set to auto, top and bottom can be any value). There is no value center for the float property, only left or right. Oh and I encourage you to use semantic HTML and this includes class names and IDs with functional names, i.e. names that reflect the function of the element, not the (alleged) look. <div class="gray"> means nothing if you intend to change the color to blue at some time (same goes for “rectangle”) whereas <div class="results"> would be the correct way. __________________ Don’t click this link! Last edited by VIPStephan; 07-05-2007 at 07:10 AM..

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread:

07-05-2007, 03:15 PM	PM User \| #3
SMC New Coder Join Date: Jun 2007 Location: Orlando, FL Posts: 60 Thanks: 5 Thanked 2 Times in 2 Posts	Worked like a charm, thanks!