DIVs not lining up

[Loopster]

Hello,
I have a webpage that uses divs. I am having problems with keeping the divs lined up and in their place, but only on some computers. My computers show the page fine, but I've checked my page from other computers and I see they sometimes stack offset and don't stay lined up.

What often happens is that reviewimage and reviewtext don't stay side by side, but appear on top of each other but offset.

Here is a snippet of the code, and of the css code:

page HTML

<div class="reviewbox">
<div class="reviewimage"><a href="link..." target="_blank"><img class="aligncenter size-full wp-image-12" title="product" src="http://file..." alt="alt name" width="150" height="156" /></a>
<div class="reviewrating">Product Rating: <img src="http://picture file.gif" alt="rating" align="absmiddle" /> (5 Stars)
Our Top Product
</div>
</div>
<div class="reviewtext"><span class="revtitle">Top Product</span>
<a href="http://link" target="_blank"><img src="http://picture.jpg" alt="Product pic" title="product" width="450" height="196" class="alignright size-full wp-image-20" /></a>
</div>
<p>
<strong>Product Review:</strong>
ttttttttttttttteeeeeeeeeeeeeeeexxxxxxxxxxxxxxxxtttttttttttttttt!</p>
<a href="http://cslurl.com/oms_track/click.php?link=13" target="_blank"><img src="http://www.topantiwrinklecream.com/wp-content/uploads/2009/04/dermaprilbutton2.jpg" alt="Dermapril SP Wrinkle Eraser Free Trial" title="Dermapril_free_trial_button" width="489" height="64" class="aligncenter size-full wp-image-98" /></a>
</div>

and here are the relevant pieces of the CSS code:

p {
 padding: 10px 10px 10px 0;
 clear: both;
}

.reviewbox { 
 display: table;
 padding: 10px;
 width: 736px;
}

.reviewtext { 
 display: block;
 float: right;
 width: 420px;
 height: auto; 
 padding: 10px;
}

.reviewimage {
 display: block;
 float: left;
 width: 252px;
 height: auto; 
 padding: 10px;
 background: #DDD; 
 border: 1px solid #CCC;
}


span.revtitle {
 font-family: Arial, Helvetica, Sans-Serif;
 font-size: 28px;
 font-weight: bold;
 color: #760446;
 text-decoration: none;
}


img.product {
 border: 1px solid #CCC;
}

.reviewrating {
 float: left;
 width: 252px;
 height: 50px; 
 margin-top: 6px; 
 padding: 10px 0 10px 0;
 font-size: 12px;
 font-weight: bold;
 background: #DDD; 
}

Is this enough to go on?
Please give me your ideas, I'm having trouble keeping these div items lined next to each other.

Thank you,
Loopster

[pritaeas]

your .reviewbox is not wide enough to contain both sub-div's. Increasing it to 800px will work, or you'll need to make the other div's a bit smaller.

[Loopster]

Thanks for the post.
But, reviewimage is 252, reviewtext is 420 so together = 672. Even with 10px padding 4 times this is still under the reviewbox width of 736.
I don't see the size problem. Can you explain?
Loopster

[MidiMagic]

There are a couple of problems here:

- You have the width declared twice, once in the style and once in the tag. In at least one case, they are different.

- What doctype are you using? The width and height parameters are deprecated in xhtml.

- Why are you using pixels? Use percent.

[pritaeas]

You forget that the margins have auto values if they are not set specifically. Have a look with the developer tool in IE8. In Safari it looks like you expect. Try setting margin to zero, see if it makes a difference.

[SKANK!!!!!]

u should try position absolute.

[atifdmv]

use this version of html
---------------------------------------------------------------------------------------

<div class="reviewbox">
  <div class="reviewimage">
    <div class="thumb">
    <a href="link..." target="_blank"><img class="aligncenter size-full wp-image-12" title="product" src="http://file..." alt="alt name" width="150" height="156" /></a>
    </div>
    <div class="reviewrating">Product Rating: <img src="http://picture file.gif" alt="rating" align="absmiddle" /> (5 Stars)
        Our Top Product
    </div>
    </div>
    <div class="reviewtext">
    	<span class="revtitle">Top Product</span>
    		<div class="thumb">
                 <a href="http://link" target="_blank">
                 <img src="http://picture.jpg" alt="Product pic" title="product" class="alignright size-full wp-image-20" /></a>
            </div>
   
    </div>
    <p>
    <strong>Product Review:</strong>
    ttttttttttttttteeeeeeeeeeeeeeeexxxxxxxxxxxxxxxxtttttttttttttttt!
  </p>
    <a href="http://cslurl.com/oms_track/click.php?link=13" target="_blank">
    <img src="http://www.topantiwrinklecream.com/wp-content/uploads/2009/04/dermaprilbutton2.jpg" alt="Dermapril SP Wrinkle Eraser Free Trial" title="Dermapril_free_trial_button" width="489" height="64" class="aligncenter size-full wp-image-98" />
    </a>
</div>

----------------------------------------------------------------------------------
Use this CSS as well
----------------------------------------------------------------------------------

p {
 padding: 10px 10px 10px 0;
 clear: both;
}
img{
border:none;}

.reviewbox { 
 display: table;
 padding: 10px;
 width: 735px;
}

.reviewtext { 
 display: block;
 float: right;
 width: 420px;
 height: auto; 
 padding: 10px;
}
.reviewtext .thumb {
 float: left;
 width: 420px;
 height: 196px;
 overflow:hidden;
border:#999999 solid 1px;
}

.reviewimage {
 display: block;
 float: left;
 width: 252px;
 height: auto; 
 padding: 10px;
 background: #DDD; 
 border: 1px solid #CCC;
}
.reviewimage .thumb {
 float: left;
 width: 150px;
 height: 156px;
 overflow:hidden;
 border:#999999 solid 1px;
}


span.revtitle {
 font-family: Arial, Helvetica, Sans-Serif;
 font-size: 28px;
 font-weight: bold;
 color: #760446;
 text-decoration: none;
}


img.product {
 border: 1px solid #CCC;
}

.reviewrating {
 margin-left: 6px;
 float:left;
 width:92px;
 font-size: 12px;
 font-weight: bold;
 background: #DDD; 
}

--------------------------------------------------------------------------------

and let me know this is fine for for you...

[JugglerDrummer]

IE 6 has issues with determining the width of an object, but it usually makes the element smaller than it should be,,

[MidiMagic]

IE counts the widths of padding, border, and margin inside a width or height declaration. Other browsers place these outside the width or height size declared.

[!!underlink!!]

not having much time to readyour code but at a guess i can tell you that differant browsers will not all read style elements the same its to do with block elements if you want to look that up some browsers will only read certain style types if they are in block elements like <td>