Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    43
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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:
    Code:
    			<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:
    Code:
    .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
    Attached Files Attached Files
    QuicknEasySalesPro.com - your quick and easy, yet powerful solution for managing your membership site sales, downloads and affiliates.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Try adding overflow: auto; to your .tbl-row div style rule.
    Teed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •