Problem with CSS DIV align

Question

If the doctype declaration is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 TRANSITIONAL//EN"> what is the best way for horizontal alignment of the DIV's like these:

<div id="outer"><div id="inner">Some text</div></div>

The CSS is:

#outer{ border-top:1px dotted #999; background-color: #F4F4F4; width:100%;} #inner{ width:500px;border:1px solid #F00; margin:auto;}

The thing that I want to do is the inner DIV align at center (horizontally) inside the outer DIV. This CSS working fine if the doctype declaration is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

What goes wrong with the original doctype? What browsers are you using to test? — Matchu
– Matchu, Commented Apr 26, 2010 at 19:04
Actually, that is working on Chrome, Firefox, Safari and Opera, but not on IE. Welcome to the club. — Ben
– Ben, Commented Apr 26, 2010 at 19:11

riffnl · Accepted Answer · 2010-04-26 19:08:06Z

1

Don't know which browser you use, but you could change

 #outer{ border-top:1px dotted #999; background-color: #F4F4F4; width:100%;}

to:

 #outer{ border-top:1px dotted #999; background-color: #F4F4F4; width:100%; text-align:center;}

Allthough.. I've tested your code on IE8, FireFox and Chrome and all three worked like a charm...

answered Apr 26, 2010 at 19:08

riffnl

3,1911 gold badge21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sergio Over a year ago

The problem with text-align:center; is that the all text inside the inner div is align center as well and I want font to align left.

Michael Herold Over a year ago

If that's the only issue, couldn't you just add text-align: left; to the #inner?

Sergio Over a year ago

No I can't because there is lots of other things inside that div:(

riffnl Over a year ago

I don't get your last comment. You dont want the text to align to the left? You could always go for the triple-nested-what-am-i-doing-where-div-structure... whereas the outerinner div (middle) is text-aligned to the left. But I would not recommend it

Diodeus - James MacFarlane · Accepted Answer · 2010-04-26 19:09:11Z

0

It seems you need to learn a bit about quirks mode.

answered Apr 26, 2010 at 19:09

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

Collectives™ on Stack Overflow

Problem with CSS DIV align

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related