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