Text line falls outside it's surrounding DIV

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

By default, containers don’t wrap around floated content, but an easy way to force them to is to add overflow: hidden to the container:

.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%;
  [COLOR="Red"]overflow: hidden;[/COLOR]
}

Hi ralph.m,

That works brilliantly. I knew there was a simple answer, but I just couldn’t find it.

Thank you.

Debbie

You’re welcome! Make sure to remember this trick, as you’ll need it on pretty much any page you ever design. In a few cases where it’s not appropriate to use overflow: hidden, you can use the more elaborate method often known as “clearfix”.

Which I personally have never once needed “clearfix” as there are other ways of doing it without resorting to that nonsense in most every case.

Another option to wrap floats is to make the parent element float too – not really an option in this case, but common enough a solution.

I do find it a bit disconcerting the number of DIV and span tags you are using on simple content… and the number of classes… The first few DIV look like they should be a heading tag, and I’m not even sure you need floats here. I also tend to poo-poo on constantly doing <?php ?> multiple times per file, as that’s usually just a waste of code and makes it harder to follow and/or format.

You’re even using classes on something that shouldn’t need them – I’d be interested in seeing what the full tag is before the “-row” part which I assume is a class declaration… Is that in a table or not? No clue what that 1px wide image is there for, though that smells like a spacer.gif – an outdated/outmoded site building technique (basically an image that has no business in the markup)…

I mean markup-wise, and the appearance that CSS would make I’m not seeing a reason for the markup to be much more than:


echo '
<div class="tbl-row',$intRow%2==0) ? '' : ' even','>
	<h2>
		<span>Site:</span>
		',$aCols['site_name'],'
	</h2>
	<div class="contents">',nl2br($aCols["contents"]),'</div>
	at <span>',$aCols["local_time"],'</span>
	on <span>',$aCols["local_date"],'</span>
	Submitted by: <span>',$aCols["full_name"],'</span>';

(adjusting for the proper heading level) and then pitching most of the classes to just target off the parent.


.tbl-row {
	width:96%;
	margin:0 auto;
	padding:8px;
	text-align:right;
	vertical-align:top;
	color:#F98537;
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
}

.even {
	background:#FFEBCB;
}

.tbl-row h2 {
/* whatever you were doing for .title-text here */
}

.tbl-row h2 span {
/* whatever you were doing with title-lbl here */
}

.tbl-row span {
	color:#F0F;
}


NOT that it’s appropriate to declare those font sizes in px either… I’d really have to see more of what it is you are trying to do though to make a proper analysis… for now it just looks like you are trying to make it much more complex than it needs to be.