Debbie-Leigh Posted May 10, 2011 Share Posted May 10, 2011 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] Quote Link to comment https://forums.phpfreaks.com/topic/235975-text-line-falls-outside-its-surrounding-div/ Share on other sites More sharing options...
diptiranjan Posted May 10, 2011 Share Posted May 10, 2011 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; } Quote Link to comment https://forums.phpfreaks.com/topic/235975-text-line-falls-outside-its-surrounding-div/#findComment-1213196 Share on other sites More sharing options...
diptiranjan Posted May 10, 2011 Share Posted May 10, 2011 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;} Quote Link to comment https://forums.phpfreaks.com/topic/235975-text-line-falls-outside-its-surrounding-div/#findComment-1213200 Share on other sites More sharing options...
dbrimlow Posted May 10, 2011 Share Posted May 10, 2011 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 Quote Link to comment https://forums.phpfreaks.com/topic/235975-text-line-falls-outside-its-surrounding-div/#findComment-1213451 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.