Question

I have such code:

<div style="position:relative">
    <div style="float:left; width: 183px; background-color:#c1cba9; color: #000000;"><img border="0" alt="Product categories" title="Product categories" src="graphic/categrieshead.png" width="179" height="43"><br />
        <div style="margin-left: 10;">Links goes here</div><br />
        <img border="0" src="graphic/catbot.png" width="179" height="17"></div>
    <div style="float:left; width: 480px; height:100px; text-align: center;"><img border="0" src="graphic/description.png" width="232" height="81"><br /><div style="text-align: left; margin-left: 10;">asasasas</div></div>
    <div style="float:left; width: 322px; height:100px; text-align: center;">
        <div style="width: 300px; color: #ffffff; background-color:#6b8861; font-size : 34px;">Item title</div>
        <div style="width: 300px; color: #ffffff; background-color:#6b8861;"><div style="width: 296px; margin: 2 2 2 2; background-color:#ffffff;">Item picture</div><div style="width: 300px; height: 2px; background-color:#6b8861; color: #6b8861;"></div></div>
        <div style="width: 300px; color: #801010; font-size : 60px;">Price: 20£</div>
    </div>
</div>

I need to add div which content (text) would appear under those three divs, but by simplyb adding it text appears not in right place (out of boundries in right side), how could I add div after my mentioned part that it would appear under that part in preview?

Answer 1

Use an element with clear:both; after your floating elements:

<div style="clear: both;"></div>

After this you could insert your new content div, and it will be below the others.