...

View Full Version : Text line falls outside it's surrounding DIV



Debbie-Leigh
05-10-2011, 02:27 AM
Hi,

I'm trying to include some text within a div, but the last line always seems to fall outside the bottom border.

An image of what it looks like is attached.

Here's the html I'm using:


<div class="tbl-row <?php echo ($intRow % 2 == 0) ? ("tbl-row-odd") : ("tbl-row-even"); ?>">
<div class="title-lbl">Site: </div>
<div class="title-text"><?php echo $aCols["site_name"]; ?></div>
<img src="{ImgSpacer}" alt="" width="1" height="20" /><br />
<div class="contents-text"><?php echo nl2br($aCols["contents"]); ?></div>
<div>
<span class="subon-text"><?php echo $aCols["local_time"]; ?></span>
<span class="subon-lbl">&nbsp;at:&nbsp;</span>
<span class="subon-text"><?php echo $aCols["local_date"]; ?></span>
<span class="subon-lbl">&nbsp;on:&nbsp;</span>
<span class="subby-text"><?php echo $aCols["full_name"]; ?></span>
<span class="subby-lbl">Submitted by:&nbsp;</span>
</div>
</div>


and here's the css:


.contents-text {
color : #F98537;
font-size : 15px;
text-align : left;
}
.tbl-row {
border-radius : 15px;
-moz-border-radius : 15px;
-webkit-border-radius : 15px;
margin-left : auto;
margin-right : auto;
padding : 8px;
vertical-align : top;
width : 96%;
}
.tbl-row-even {
background-color : #FFEBCB;
}
.tbl-row-odd {
background-color : transparent;
}
.subby-lbl {
color : #F98537;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subby-text {
color : #F0F;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subon-lbl {
color : #F98537;
display : inline;
float : right;
font-size : 15px;
vertical-align : top;
}
.subon-text {
color : #F0F;
display : inline;
float : right;
font-size : 14px;
vertical-align : top;
}


After much testing, I've found that it's the floats that seem to be causing the problem. When I take them out, the row is included within the outside div, but when I put them back in, the row falls outside.

I need to keep the floats, because I would like to have the "Submitted" row aligned to the right, unless there's another way to achieve the same effect.

So, does anyone know how I can have the last row right-aligned and included within the surrounding div?

Debbie

teedoff
05-10-2011, 03:18 AM
Try adding overflow: auto; to your .tbl-row div style rule.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum