Question

I have a text block in a div that is floated to the right. The div should align to the top but it has bumped down about 100px. See the text box next to the red flower here: http://174.121.46.122/~flowerwo/inside.html

I tried absolution positioning but when I do the background image disappears. It should be obvious where the text needs to be but it won’t align properly.

Here is the html:

<div id="small-box">
<div id="small-box-top">
<div id="small-box-bot">
<div id="text-box">
<h3><a href="#">Headline</a></h3> 
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<img class="small-box-photo" src="_images/flower-red.jpg" alt="flower" /> 
</div>
</div>
</div><!-- end small box -->

Here is the CSS:

#small-box  { 
    width: 625px; 
    position: relative;
    margin: 10px 0 0 5px;
    background: url(../_images/bg_small-box-mid.jpg) repeat-y; }
#small-box-top          { width: 625px; background: url(../_images/bg_small-box-top.jpg) no-repeat center top; }
#small-box-bot          { width: 625px; background: url(../_images/bg_small-box-bot.jpg) no-repeat left bottom; }

img.small-box-photo     { width: 245px; height: 258px; margin: 20px 0 20px 20px; position: relative; }
#text-box

Any help getting this to align properly to the top will be appreciated.

            { width: 300px; float: right; margin: 0 30px 0 0; } 

Answer 1

#small-box-bot => display: table;

img.small-box-photo => float: left;