I need display an image on right of some paragraph without using float.
So I come up with this solution which use display:tableto obtain a very similar result.
My CSS works great on IE8 > but not with any version of Firefox.
As for my understanding Display:table should be support by FF.
Any idea what I’m doing wrong here and how to fix it? Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.box
{
display:table;
background-color:Yellow;
margin:30px 0px 30px 0px;
}
.box p
{
background-color:Gray;
}
.box h2
{
}
.box img
{
display:table-cell;
vertical-align:top;
}
</style>
</head>
<body>
<div class="box">
<h2>
Title 01 here.</h2>
<p>
Some text 01 here, Some text 01 here, Some text 01 here, Some text 01 here, Some
text 01 here, Some text 01 here.</p>
<img src="http://crackle.imageshack.us/images/blue/cooltool.png" alt="Angry face" />
</div>
<div class="box">
<h2>
Title 02 here.</h2>
<p>
Some text 02 here, Some text 02 here, Some text 02 here, Some text 02 here, Some
text 02 here, Some text 02 here.</p>
<img src="http://crackle.imageshack.us/images/blue/cooltool.png" alt="Angry face" />
</div>
</body>
</html>
Means that the contents of the object with
display:table-cell;gets vertically alligned.you’ll need to have the image first in its parent, and why cant you use float?