Text cutting off at the bottom in float left <p>

Hi all

I'm not a newbie to .css, however, I am definitely not advanced. I am using .net (Visual Studio 8) with a MasterPage and ContentPlaceHolder. I am using the "Perfect 3-column Layout" from Matthew James Taylor's blog (thank you!) and all looks great but in the middle column I have an image set with Float:left - great, no problem, but for some reason when I put my styling in for the font-size or change the default font to verdona, (whether putting it directly into the HTML as Style="" or calling a class in my Style sheet) it cuts off the bottom of my text exactly at the bottom of the image! Here's my HTML (from inside the Contentplaceholder):

<%@ Page Language="VB" MasterPageFile="../MasterPages/CSMaster1.master" AutoEventWireup="false" CodeFile="DiscoverCS.aspx.vb" Inherits="Home_DiscoverCS" title="Discover Consejo Shores" %>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
     <div class="col1">
	    <!-- Column 1 start (this is the middle column)-->
	    <div class="content">
	        <h2 class="pagename">Discover Consjo Shores!</h2>
	        <p><img src="../Home/HomeImages/CSParkView.jpg" alt="CSParkPhoto" class="topimg" style="height:300px; width:400px; float:left; left:0px;" /></p>
            <p class="font3">Established in Belize over 40 years ago by Land Surveyor, Planner, Developer, Real Estate Broker and adventurer, Bill Wildman, Consejo 
            Shores is a well-established residential seafront development in Belize. This planned community on Corozal Bay has waterfront properties, 
            homes, residential lots, multi-use parcels, an inter-connected park system, four sea-front parks with coastal access and a 9-hole golf course, 
            all within this unique tropical residential neighborhood. </p>
            <p></p>
            <p></p>
	    </div>
	    <!-- Column 1 end -->
    </div>
</asp:Content>

Code (markup):

and here is my complete style sheet (I can post the HTML for the Master page if needed, but it seems to be working perfectly with another contetplaceholder!) I get the same results wwhen I use this code directly in the <p> tag: style="position:relative; top:55px; font-size:1em; font-family:Verdana; color:#3E1F00;

/* General styles */
	body, html
{
    margin: 0;
    padding: 0;
    border: 0; /* This removes the border around the viewport in old versions of IE */
    width: 100%;
    min-width: 600px; /* Minimum width of layout - remove line if not required */ /* The min-width property does not work in old versions of Internet Explorer */
    font-size: 90%;
    background-image: url('../Images/Background_Coquina.jpg' );
}

h1, h2, h3 
{
	margin:.8em 0 .2em 0;
	padding:0;
}

p 
{
	margin:.4em 0 .8em 0;
	padding:0;
}

img
{
    margin: 10px 0px 5px 0px;
}

.topimg
{
    position: relative;
    top: 50px;
    margin: 2% 2% 1% 2%;
    border: 3px solid #008080;
}

.pagename
{
    position:relative; 
    top:15px;
    text-align:center;
    color: #3E1F00;
}

.font1
{
    font-family: Verdana;
    font-size: 11pt;
    color: #008080;
    text-align: center;
    line-height: 12pt;
}

.font2
{
    font-family: Verdana;
    font-size: 11pt;
    color: #3E1F00;
    font-weight:bold;
    text-align: center;
    line-height:12pt;
}

.font3
{
    font-family:Verdana; 
    font-size:11pt; 
    position:relative; 
    top:55px; 
    color:#3E1F00;
}

.center
{   
    text-align:center;
}

#header
{
    clear: both;
    float: left;
    border-style: outset;
    border-width: 15px;
    border-color: #827762 #7A725F #3A3426 #AC9E84; /*#216FAF;*/
    width: 90%;
    height: 250px;
    margin-top: 1em;
    margin-left:4%; 
    margin-right:3%;
    background-image: url( '../Images/Header_background.jpg' );
    background-repeat: repeat;
    z-index: -1;
}
	
#header .CSFont
{
	font-family: 'Lucida Calligraphy';
	font-weight: bold;
	font-size: 4em;
	text-align: center;
	top:-20px;
	color: #216FAF;
}
#header .span
{
    font-size: 20pt;
    position: relative;
    top: -20px;
}

#header .slogan
{   
    color: #216FAF;
    font-family: 'Trebuchet MS';
    font-size: 20pt;
    position: relative;
    top: -50px;
    width:100%;
    text-align:center;
    height: 49px;
}

#header .logo
{
    z-index: 1;
    position: absolute;
    top: 20px; 
    left:5.5%; /*top:10px; left:5px; */
    background-repeat: no-repeat;
    border-style: none;
    border-width: 0px;
    float: left;
    height:225px;
}

#header ul 
{
	clear:left;
	float:left;
	width:100%;
	list-style:none;
	margin:10px 0 0 0;
	padding:0;
}
#header ul li 
{
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
}
#header ul li a
{
    float: left;
    margin: 0 0 0 1px;
    padding: 3px 10px;
    background: transparent;
    color: #3E1F00;
    text-decoration: none;
    position: relative;
    top:-210px;
    font-size: 11pt;
    line-height: 1em;
    width: 93px;
    z-index: 2;
    left: 0px;
    height: 30px;
    font-weight: bold;
}
#header ul li a:hover
{
    background: transparent;
    color: #216FAF;
}
#header ul li a.active, #header ul li a.active:hover
{
    color: #0F324F;
    background: transparent;
    font-weight: bold;
}

/*navigation side bars*/

a 
{   text-decoration: none;
    color:#3E1F00;
    z-index:3;
}

a:hover
{
    color: #247AC1;
    background: transparent;
    text-decoration: none;
}


.leftwallhang
{
    margin-left:8%;
    position: relative;
    background: transparent url(../images/wall_rug.png) no-repeat scroll top left;
    z-index: 2;
    height: 900px;
    top: 0px;
}

.lefticons
{
    position: relative;
    left:50px; 
    width:115px; 
    height:100Px;
    font-size:11pt;
    font-weight:bold;
    color:#3E1F00;
    text-align:center;
    text-decoration: none;
    border:none;
    z-index:3;
    width:100px;
    line-height:10pt;
}

.rightwallhang
{
    position:relative;
    background: transparent url(../images/wall_rug.png) no-repeat scroll top left;
    z-index:2;
    height:900px;
    top:0px;
    
}
.righticons
{
    position: relative;
    Right:-50px; 
    width:115px; 
    height:100Px;
    font-size:11pt;
    font-weight:bold;
    color:#3E1F00;
    text-align:center;
    text-decoration: none;
    border:none;
    z-index:3;
    width:100px;
}

/* 	wall hangings for Master 2 */
.leftwallhang2
{
    position:relative;
    background: transparent url(../images/wall_rug.png) no-repeat scroll top left;
    z-index:2;
    height:900px;
    top:0px;
}
.rightwallhang2
{
    position:relative;
    background: transparent url(../images/wall_rug.png) no-repeat scroll top left;
    z-index:2;
    height:900px;
    top:0px;
}


/* 	'widths' sub menu */
#layoutdims 
{
	clear:both;
	background:transparent;
	border-top:4px solid #000;
	margin:0;
	padding:5px 15px !important;
	text-align:right;
}
/* column container */
.colmask 
{
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	height:1000px;
	width:100%;			/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft 
{
	float:left;
	width:100%;			/* width of page */
	height:100%;
	position:relative;
}
.col1, .col2, .col3
{
    float: left;
    position: relative;
    padding: 0 1% 1% 1%; /* no left and right padding on columns, we just make them narrower instead 
					only padding top and bottom is included here, make it whatever value you need */
    overflow: hidden;
}
/* 3 Column settings */
.threecol 
{
	/*background:#blue;		 right column background colour */
}
.threecol .colmid 
{
	right:24%;	/* width of the right column */
	/*background:#fff;		 center column background colour */
}
.threecol .colleft 
{
	right:55%;			/* width of the middle column */
	 /*background:#Blue;	left column background colour */
}
.threecol .col1 
{
	width:52%;			/* width of center column content (column width minus padding on either side) */
	left:102%;			/* 100% plus left padding of center column */
}
.threecol .col2 
{
	width:20%;			/* Width of left column content (column width minus padding on either side) */
	left:24%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 
{
	width:21%;			/* Width of right column content (column width minus padding on either side) */
	left:83%;			/* Please make note of the brackets here:
					(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

.content
{
    z-index:3;
    height:100%;
}
	
/* Footer styles */
#footer
{
    clear: both;
    float: left;
    border: 1px outset #8D7D63;
    position: relative;
    bottom: 0px;
    width: 93%;
    font-size: 1.3em;
    text-align: center;
    background-image: url( '../Images/mayan_bricks.jpg' );
    background-repeat: repeat-x;
    vertical-align: bottom;
    overflow: hidden;
    font-weight: bold;
    color: #1F67A3;
    margin-left: 4%;
    margin-right: 3%;
    z-index: 1;
}

Code (markup):

 

You didn't say which browser, so I'll guess IE<8. This sounds like the Guillotine bug.

cheers,

gary

 

Sorry - actually, no this is happening in Firefox 3.0.14, Chrome but NOT in IE7! (I am not developing in IE 8 at this point) so that's why I'm stumped...

 

So I am going through this methodically, and took out all references to my style sheet and am adding the elements back in one at a time. On the image I have this style code: style="height:300px; width:400px; position:relative; top:50px; float:left; left:0px; border:solid 3px teal; margin:1% 2% 2% 2%;" and this code in my <p> tag: style="position: relative; top:55px; font-family:Verdana;" and what I have found is that the text cuts off right at the bottom of the image as SOON as I change the font-family to Verdana. If I leave it as the default font, it's small enough that it doesn't reach the bottom of the picture. The weird thing is that the bottom border of the image is not displaying either - so I am sure that what-ever is causing the bottom border on my image to disappear is what is causing my text to cut off. Any ideas?

 

More playing around with it and when I remove the "Position:relative;" then it wraps correctly - however it then does not start at the position on the page where I need it to. If I change it to "Position: absolute;" of course that takes it out of the block and I lose all my alignment and then have to position the left-hand margin and after all that - it STILL cuts off the bottom! Oh help please!?

 

Which p is getting the position: relative? The p with the funny font3 class??

You want the image to keep its own line and the p starts after it? Or where? Normally we don't use positioning for this at all!

Somehow I keep thinking the height is doing the cutting off but it seems the height was only set on the image?? because Verdana is a larger font compared to other fonts, explains why the text is larger with Verdana. You have some elements with heights and you have some elements with overflow: hidden (why?)...

Certainly there's enough weird code in there that shouldn't be doing anything but who knows, like this:

.content
{
    z-index:3;
    height:100%;
}

Code (markup):

It's not a positioned element, so it can't have a manual z-index. Height: 100% will default to height: auto unless its parent has an explicit height.

A link to the page would really help. Plus I can't read asp. Even a demo page without real content online where we can see what you want it to do and so we can see which element is doing the cutting-off.

 

Please put that on a public facing server if you haven't already, and give us a link. I want to see this in action.

cheers,

gary

 

I'm sorry - I don't have a link to the website yet (Is there a way to put code in my page to keep it from being crawled while it's in development?) I haven't posted it up to the server yet because I don't want it to be crawled by search engines yet.

I got around the problem yesterday by creating two new classes in my .css - one for the left image and one for the right. I also changed the top:55px; to top:2px; and set the position of my text on the page by putting in some <br /> tags - not the best solution I know, but it did work. I know I have some strange code in the .content class - I was experimenting and forgot to remove the Height 100% - it didn't help (obviously) - but I was willing to try anything! It was the first <p> tag with the class font3 - but it seemed to have more to do with the position:relative in the img class, but I don't understand why the text wouldn't wrap around the image when the float was set to left, and it worked fine in IE7...weird!

Here is the HTML code from the master page (you can see where the content page code goes):

<%@ Master Language="VB" CodeFile="CSMaster1.master.vb" Inherits="MasterPages_CSMaster1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Consejo Shores</title>
    <link href="../Includes/CSMaster.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <div id="header">
	     <div id="Div1" align="center">
        
        <p class="CSFont">Consejo Shores<span class="span"> ®</span></p>
	    <p class="slogan" >
	    The Most Reputable Residential Waterfront community In belize</p>
	    <img src="../Images/cSLlogo.png" alt="consejo Shores Palm Tree" class="logo"/>
	    <!-- put header icons here   -->
            <img src="../Images/Header_bar.jpg"  
                 style="position:relative; top:-91px; text-align:center; left: 1px;" 
                 alt="consejo shores navigation" />
                 
            <table align="center">
                <tr>
                    <td align="center">
                    <ul>
		            <li ><a href="../Home/Default.aspx"><br /><br /><br /><br />Welcome<br />Home</a></li>
		            <li ><a href="../Home/DiscoverCS.aspx">Discover<br /><br /><br /><br />Consejo Shores</a></li>
		            <li ><a href="../Properties/Properties.aspx"><br /><br /><br /><br />Properties<br />For Sale</a></li>
		            <li ><a href="../Pictures/Pictures.aspx"><br /><br /><br /><br /><br />Photos</a></li>
		            <li ><a href="../About/AboutUs.aspx"><br /><br /><br /><br /><br />About Us</a></li>
		            <li ><a href="../About/ContactUs.aspx"><br /><br /><br /><br /><br />Contact Us</a></li>
	                </ul>
                    </td>
                </tr>
            </table>
            
	     </div>
        </div>
        
        
        <div class="colmask threecol">
	    <div class="colmid">
		    <div class="colleft">
		        <img src="../Images/scroll.png" alt="" width="80%;" height="1000px;" style="position:absolute; top:-15px; left:85%; z-index:-1;"/> 

		        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
            
                <%--This is the Middle Column - needs to go inside the Content place holder
                <div class="col1">
				    <!-- Column 1 start (this is the middle column)-->
				    <h2>THIS IS THE MIDDLE COLUMN - NEEDS TO BE INSIDE THE CONTENT PLACE HOLDER</h2>
				    
				    <!-- Column 1 end -->
			    </div>--%>
			    
                </asp:ContentPlaceHolder>
		    
			    
			    <div class="col2">
				    <!-- Column 2 start (This is the Left Column) -->
				    
				    <div class="leftwallhang">
				    
				        <img src="../Images/where_consejo_icon.png" alt="Where is Consejo Shores?" class="lefticons" style="Top:65px;" />
				        <p class="lefticons" style="Top:5px;"><a href="../Home/WhereisCS.aspx">Where is Consejo Shores?</a></p>
				        
				        <img src="../Images/tour_icon.png" alt="Tour Our Community" class="lefticons" style="Top:-55px;" />
				        <p class="lefticons" style="Top:-100px;"><a href="../Properties/TourMap.aspx">Tour Our Community</a></p>
				        
				        <img src="../Images/properties_side_icon.png " alt="Properties For Sale" class="lefticons" style="Top:-175px;" />
				        <p class="lefticons" style="Top:-220px;"><a href="../Properties/Properties.aspx">Properties For Sale</a></p>
				        
				        <img src="../Images/activities_icon_.png" alt="Activities & Adventures" class="lefticons" style="Top:-295px;" />
				        <p class="lefticons" style="Top:-400px;"><a href="../Home/Activities.aspx ">Activities<br />
				        <span style="Position:relative; Top:60px;">Adventures</span></a></p>
				        
				       <img src="../Images/info_icon.png" alt="Information" class="lefticons" style="Top:-415px;" />
				        <p class="lefticons" style="Top:-450px;"><a href="../About/Information.aspx">Information</a></p>
				    
                    </div>
				    <!-- Column 2 end -->
			    </div>
			    <div class="col3">
				    <!-- Column 3 start (This is the Right Column) -->
				    
				    <div class="rightwallhang">
				    
				    <img src="../Images/corozal_icon.png " alt="Corozal Town" class="righticons" style="Top:65px;" />
				        <p class="righticons" style="Top:30px; font-size:10pt;"><a href="../Home/WhereisCS.aspx">Corozal Town</a></p>
				        
				        <img src="../Images/shopping_icon.png" alt="Shopping" class="righticons" style="Top:-50px;" />
				        <p class="righticons" style="Top:-85px;"><a href="../AreaInfo/Shopping.aspx">Shopping</a></p>
				        
				        <img src="../Images/lodging_icon.png" alt="Lodging" class="righticons" style="Top:-170px;" />
				        <p class="righticons" style="Top:-210px;"><a href="../AreaInfo/Lodging.aspx">Lodging</a></p>
				        
				        <img src="../Images/restaurants_icon.png" alt="Restaurants" class="righticons" style="Top:-290px;" />
				        <p class="righticons" style="Top:-327px;"><a href="../AreaInfo/Restaurants.aspx">Restaurants</a></p>
				        
				       <img src="../Images/transport_icon.png" alt="Transportation" class="righticons" style="Top:-410px;" />
				        <p class="righticons" style="Top:-448px; font-size:10pt;"><a href="../AreaInfo/Transportation.aspx">Transportation</a></p>
				    
				    
				    </div>
				    <!-- Column 3 end -->
			    </div>
		    </div>
	    </div>
    </div>
    <!--Footer --> 
          <div id="footer">
                <span style="font-family:Lucida Calligraphy; font-size:1.4em;">Consejo Shores</span><br />
                consejoshores@gmail.com<br />
                Belize 501-423-1005<br /><br /><br />
          </div>
        
        
    </div>
    </form>
</body>
</html>

Code (markup):

Thanks for your help!

 

Mm, could you also post a picture of how you're trying to make it look as well??

Bleh, ASP, I dunno why but it has this irritating habit of wrapping all web pages inside forms... this of course makes any page you write which actually has a real form in it invalid (because a form cannot be nested in a form). I'm not sure how easy it is to remove that though.

Put a text document on the server too, called robots.txt. "Good" bots like the googles always check for a robots.txt before indexing a site. The document can say what NOT to index. It's a good idea to always have one anyway, even if you're letting everything be indexed.

I have one, it says this:
User-agent: *
Disallow: /

All user agents (*), disallow everything in root (/), which is everything at stommepoes.nl
Almost everything on my server is for development. Of course, don't ever put anything online that must remain secret... spam bots don't read robots.txt

*edit the code in the wallhangs look an awful lot like lists. Like, ul, li, etc.