Text line falls outside it's surrounding DIV

[Debbie-Leigh]

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"> at: </span>
				<span class="subon-text"><?php echo $aCols["local_date"]; ?></span>
				<span class="subon-lbl"> on: </span>
				<span class="subby-text"><?php echo $aCols["full_name"]; ?></span>
				<span class="subby-lbl">Submitted by: </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

 

 

[attachment deleted by admin]

[diptiranjan]

hi just remove the float:right  from css then it wll work

.subby-lbl {

color : #F98537;

display : inline;

float : right;

font-size : 15px;

vertical-align : top;

}

 

[diptiranjan]

also do this a little change

<div class="tbl-row">

<div class="title-lbl">Site: </div>

<div class="title-text">xyz ?></div>

<img src="{ImgSpacer}" alt="" width="1" height="20" /><br />

<div class="contents-text">jhjhkjkljljlkjl;kl;k; </div>

<div>

    <span class="subon-text">fsdfsfdsfdsfdsfdssf</span>

<span class="subon-lbl"> at: </span>

<span class="subon-text">fsdsfsfdsfsdfsvg tbbc</span>

<span class="subon-lbl"> on: </span>

<span class="subby-text">cbvtgg vvxvcvxxv</span>

<span id="submit">Submitted by: </span>

</div>

</div>

#submit{border:1px solid gold;margin-left:200px;}

 

[dbrimlow]

You need to "clear" your floats.

 

There are a few techniques that work - some people will get rabid and attack if you don't use their favorite, but they all have their pros and cons. Here are two that I use:

 

1. Quick and easy technique - to work in IE and Opera container requires a flexible width and height:

 

Simply add "overflow:auto;" to the ".tbl-row" select - put it  before "width:96%;"

Pros: contains all floated elements within the parent container

Cons: can add unwanted scrollbars if the content escapes the container

 

Some people prefer using "overflow:hidden;". This eliminates the scrollbar potential.

Pros: contains all floated elements within the parent container

Cons: can cause some content to be hidden (if height is fixed in pixels, or if width of combined floats exceeds the width of the parent container)

 

2. My favorite is the "clearfix" technique (it uses the ":after" pseudo element) - add the following AFTER the entire .tbl-row select

 

.tbl-row:after {

visibility: hidden;

display: block;

font-size: 0;

content: " ";

clear: both;

height: 0;

}

* html .tbl-row {height:1%} /* IE6 */

*:first-child+html .tbl-row {height:1px} /* IE7 */

 

Pros: Clears floats before and after the container and contains floats within the container - it works every time in every browser - it validates.

Cons: LOOK AT IT!!!! You would need to add any other floated containers to it. It needs those two IE hacks since IE 6 and 7 don't support the ":after" pseudo element