CSS boxes collapsing while zooming out - css

Question

I have a problem related to zooming out on the webpages I am working with.
When the page is zoomed out the boxes are misaligned
Normal Look:
While Zooming Out:
Div Structure
<div class="answerbox shadow">
<div class="content">
<p>What is an Annuity and how does it help with my retirement income?</p>
</div>
<p> <a class="more" href="aboutannunities">Find Out More</a></p></div>
CSS Code:
.answerbox {
height: 125px;
/*Specify Height*/
width: 250px;
/*Specify Width*/
border: 1px solid rgb(217, 217, 217);
border-radius: 3px 3px 3px 3px;
position: relative;
margin-bottom: 15px;
background: -moz-linear-gradient (rgb(20, 255, 255), rgb(230, 230, 230)) repeat scroll 0 0 transparent;
background: -o-linear-gradient(rgb(20, 255, 255), rgb(230, 230, 230)) repeat scroll** 0 0 transparent;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(20, 255, 255)), to(rgb(230, 230, 230))) repeat scroll 0 0 transparent;
/* older webkit syntax */
background: -webkit-linear-gradient(rgb(20, 255, 255), rgb(230, 230, 230)) repeat scroll 0 0 transparent;
word-wrap: break-word;
padding: 7px;
}
.shadow {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #E6E6E9;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#FFFFFF ), to(#E6E6E9));
background: -webkit-linear-gradient(#FFFFFF , #E6E6E9);
background: -moz-linear-gradient(#FFFFFF , #E6E6E9);
background: -ms-linear-gradient(#FFFFFF , #E6E6E9);
background: -o-linear-gradient(#FFFFFF , #E6E6E9);
background: linear-gradient(#FFFFFF , #E6E6E9);
-pie-background: linear-gradient(#FFFFFF , #E6E6E9);
behavior: url(PIE.htc);
}
Any ideas/suggestions/help will be thankful...
Many thanks...

Answer 1

<div style="width: 540px;float:left;">
Add this in in your CSS:
.answerbox {
float:left;
.....
And try with following code:
<div style="width: 540px;float:left;">
<div class="answerbox shadow">
<div class="content">
<p>What is an Annuity and how does it help with my retirement income?</p>
</div>
<p> <a class="more" href="aboutannunities">Find Out More</a></p></div>
<div class="answerbox shadow">
<div class="content">
<p>What is an Annuity and how does it help with my retirement income?</p>
</div>
<p> <a class="more" href="aboutannunities">Find Out More</a></p></div>
</div>