CODEWITHSUNDEEP
csspositioning
forrest
forrest

Reputation: 11012

Why is the text not aligning to the top?

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; }

Upvotes: 0

Views: 649

Answers (2)

korywka
korywka

Reputation: 7653

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

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

Upvotes: 1

spliter
spliter

Reputation: 12599

It does work as expected for me. Take a look at this example. Doesn't it look like what you try to achieve? If no, give more information and, preferably, the link to online version where we can see the issue.

UPDATE AFTER THE ONLINE EXAMPLE.

So, in the example you gave, there is the problem with clearing happening when:

  1. the #r-box-lower clears the right floating with clear: right
  2. the #r-box-lower sits at the same DOM level as #small-box, containing the weirdly shifted block of text
  3. because of the p.1 and p.2 the #text-box is being cleared by #r-box-lower that makes it start right where #r-box-lower starts.

So, to fix the issue, you need to wrap #right-box and r-box-lower into a shared div like:

<div id="right-column" style="float: right; width: 192px">
    <div id="right-box">
        …
    </div>
    <div id="r-box-lower">
        …
    </div>
</div>

Surely, you want to move those inline styles into your stylesheet.

Upvotes: 1

Related Questions