why does my website text overlap the images? - html

Question

So on my website, on this page http://dunnrite.co.uk/our_work the right hand side text should be on the right but sometimes in chrome and possibly other browsers it over laps the images. When you refresh a couple times or resize the browser (my site's responsive) it goes to normal.
Here is the HTML code:
<div id="content_box">
<div id="left_side_work">
<h3>Our Work</h3>
<a class="fancybox" rel="group" href="Images/Clubz4u.jpg">
<div id="clubz4u_pic"></div>
</a>
<a target="blank" href="http://beauxcadeaux.co.uk">
<div id="beaux_cadeaux_pic"></div>
</a>
</div>
<div id="right_side_work">
<h3>Clubz4u</h3></br>
<p>Clubz4u was a social enterprise that Dunn Rite set up for DHSB school. It enabled club owners/event organisers to list their activity's details on our site for free.
This also meant that anyone looking to join a club could easily see the clubs on offer in their region.
To help cover any costs associated with setting up the website Clubz4u had live adverts placed by Google which when clicked generated income.
We also produced interactive Facebook features.
</p>
<div id="beaux_cadeax_text">
<h3 style="margin-top:150px;">Beaux Cadeaux</h3></br>
<p>Beaux Cadeaux is an online gift shop created by husband and wife Val and Richard Cass. They recently created their own website and needed Dunn Rite's assistance gaining some SEO. Richard commented on our Dunn Rite representative saying "I have found you to have a maturity and professionalism beyond your years. You have been helpful and efficient. It would be good to think that we could both benefit from working with each other in the future."
</p>
</div>
</div>
<div id="nextpage">
Next →
</div>
</div>
and the corresponding CSS
#left_side_work {
width: 40%;
padding-top: 30px;
left: 0;
margin-left: -250px;
float: left;
}
#right_side_work {
margin-top: 35px;
display: inline-block;
width: 400px;
height: auto;
float: right;
margin-left: 70px;
position: absolute;
}
Any ideas?
Thanks

Answer 1

Quick answer: remove float: right from #right_side_work
Longer answer: don't even think about using absolute positioning for layout purposes (and most of other uses), because you allow blocks to superimpose one above the other and... fail.
Using both float and absolute positioning shouldn't be necessary: one would use right: 0 to position it to the right (but don't use absolute positioning).
A block floating should come first in your HTML code. If it's a div and it's floating, why bother to set inline-block?
Are you trying to display a text next to each image? Then your HTML code should be: image1 - text1 - image2 - text2 - etc, NOT (all the image) - (all the text). Create lines/rows of content and then inside each of them columns, not 2 huge columns of text that won't ever align horizontally at the slightest modification.
Finally, left, right, top and bottom properties are only useful when an element is positioned in some way. No effect here on left part.

Answer 2

change
float: right;
to
float: left;
in line 175 of your style.css
#right_side_work {
margin-top: 35px;
display: inline-block;
width: 400px;
height: auto;
float: left;
margin-left: 70px;
position: absolute;
}