Simple float question

deansaddigh · December 3, 2009

Ok Basically im displaying an image and a decscription and i want the description to wrap around the image simple using a float left on the image.

However it was working an now its not can some one please point me in the right direction please.

php code

echo '<img src="'.$file.'" class="floatleft" width="100" height="100"/> ';
        	

			echo '<p><font color="#990000"> Product Description:</font> ';
				echo $productdescription = $row['ProductDescription'];
			echo '</p>'

And the css where i make the image float left.

.floatleft
{
float:left;
padding:0px 5px 5px 5px;
}

here the image to show you that the description is underneath the image

JustLikeIcarus · December 3, 2009

can you post the actual html getting generated for that section? Cant be sure why it isnt working without more info.

deansaddigh · December 3, 2009

Sure, here is the html being generated

<!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>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="images/animated_favicon1.gif" />
<link rel="stylesheet" type="text/css" href="css/layout.css" /> 
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="js/mojozoom.js"></script>  

<link type="text/css" href="css/mojozoom.css" rel="stylesheet" />  

<title>Nextdayfrags.co.uk</title>
</head>

<body>
<!--wrapper to hold site-->
    <div id="wrapper">
    	
      <!--Logo holder-->
      <div id="header"></div>
        
        <div id="left">
       		<div class="nav">    
       			  	
	        	<ul>

					<li><a href="#">SPS frags</a></li>
					<li><a href="#">LPS frags</a></li>
					<li><a href="#">Soft Coral frags</a></li>
					<li><a href="#">Coral Frag packs</a></li>
					<li><a href="#">SPS Coral Colonies</a></li>
					<li><a href="#">LPS Coral Colonies</a></li>

	        		<li><a href="#">Anemones</a></li>
	        		<li><a href="#">Clean Up Critters/ Inverts</a></li>
	        		<li><a href="#">Coral Food</a></li>
	        		<li><a href="#">Reef Accesories</a></li>
	        		<li><a href="#">Gift Vouchers</a></li>
	        	
				</ul>

        	<div align="center">
        	 
			 <img src="images/paypal.png"/> 	
        		 
        	</div>
        	</div>
        </div>
        
        	<div id="main">
        	<h1>Royal Gramma</h1><p>Category: <font color="#990000">LPS frags</font></p>
<p>Product Price: <font color="#990000">123</font></p>
<img src="Product_image/RoyalGramma.jpg" class="floatleft" width="100" height="100"/> 
<p><font color="#990000"> Product Description:</font> he fish begins as a dark purple starting at the head which fades mid-body to yellow at the tail. The 
royal gramma will also have a small black spot 
on the front of the dorsal fin. The royal 
gramma resembles the false gramma (Pseudochromis paccagnellae), 
with the two main differences between the two being that the false gramma has clear fins and does not fade, but rather has a distinct change in colour. Royal gramma averages slightly over 8 cm (3 inches) and has
been tank bred.</p>
<div class="cleardescription"><font color="#990000">Hover over image to enlarge</font> <img src="Product_image/RoyalGramma.jpg"  data-zoomsrc="Product_image/RoyalGramma.jpg" width="200" height="200"/><br/><br/><br/></div>
<p><font color="#990000"> Product Video:</font><br /><object width="445" height="364"><param name="movie" value="http://www.youtube.com/v/4zK1hCn8jBg&hl=en_US&fs=1&color1=0x006699&color2=0x54abd6&border=1"></param><param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4zK1hCn8jBg&hl=en_US&fs=1&color1=0x006699&color2=0x54abd6&border=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="445" height="364"></embed></object>           
            
        </div>

        
      <div id="right">
    	<p>Some text</p>
    </div>
    
    <div id="footer">
    <p>Some text</p>
    </div>

    
    </div>

   

</body>
</html>

haku · December 3, 2009

Thanks for posting the output, but can you format it for us to to be able to read easily? There is a line in the middle that is about 3 miles long.

JustLikeIcarus · December 3, 2009

Seems to work fine using just the two lines of css you mentioned. Maybe your css file has something thats overriding your float? Post your css if you can.

deansaddigh · December 3, 2009

Sure heres the whole css code

@charset "utf-8";
/* CSS Document */




/* Heading */
h1{
font: large georgia;
line-height: 45px;
padding:0; margin:0;
color: #FFFFFF;

background: url(../images/devider.png) bottom right no-repeat;

font-weight: normal;
}

h2{
font: large georgia;
line-height: 45px;
padding:0; margin:0;
color: #FFFFFF;
font-weight: normal;
}

p{

	padding:0; margin:0;
	font: strong, times, Times New Roman, times-roman, georgia, serif;
	font-size: 14px;


	color: #000000;
}		






a:link { 
color: #FFFFFF;
font-weight: 600; 
  	font-size:14px;
  	text-decoration: none;
}
a:visited { 
color: #FFFFFF;
font-weight: 600; 
  	font-size:14px;
  	text-decoration: none;
}
a:hover { 
font-size:14px;
font-weight: bolder;
color: #000080;
text-decoration: underline;

}
a:active { 
color: #333333;
text-decoration: none;
}

        


a img {
    border: none;
    
}


body {

margin: 0;
padding: 0;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #1372ce;
background-image: url(../images/pagebg.jpg); 
background-repeat: no-repeat;
background-attachment:fixed;
}

#wrapper {
/*Wrapper dont automatically expand to contain floated elements you have you use
over flow:auto to do this */
width: 940px;

  	margin-left: auto ;
  	margin-right: auto ;
overflow:hidden;
}

#headerlinks{
width: 940px;

 background-image:url(../images/tiled.png) ;
}

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
}            

#header {
background-image:url(../images/logo.png); background-repeat :no-repeat;
width: 800px;
height: 100px;


}

#left {
margin-top: 20px;
width: 200px;
float:left;


}

#main {

margin-top: 20px;
margin-left: 10px;
width: 500px;
float:left;
margin-bottom:2cm;
background-image:url(../images/tiled.png) ; 
overflow:auto;

}

#right
{ 
width:200px; 
margin-top: 20px;
float:right;


}

#footer{

width: 940px;
  	margin-left: auto ;
  	margin-right: auto ;
  	
clear:both;
background-image:url(../images/tiled.png) ; 	
}


/*****Forms******/
form {
    margin: 1em;
    width: 90%;

}

label
{
width: 10em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;

}

.submit input
{
margin-left: 4.5em;

}

legend
{
color: #fff;
background: #4169E1;
border: 1px solid #007FFF;
padding: 2px 6px;
}

fieldset
{
border: 1px solid #FFFFFF;

}

input {
padding:0.15em;
width:10em;
border:1px solid #ddd;
background:#fafafa;
font:bold 0.95em arial, sans-serif;
-moz-border-radius:0.4em;
-khtml-border-radius:0.4em;
}

select {
background-color: #FFFFFF;
color: #000000;
font:bold 0.95em arial, sans-serif;
-moz-border-radius:0.4em;
-khtml-border-radius:0.4em;
}

textarea {
width: 300px;
height: 120px;
color:#FFFFFF;
font:bold 0.95em arial, sans-serif;
-moz-border-radius:0.4em;
-khtml-border-radius:0.4em;
background-image: url(../images/formb.jpg);
background-position: bottom right;
background-repeat: no-repeat;
}

.submit {
font:bold 0.95em arial, sans-serif;
 border:none;

height: 25px;
background-color: #63D1F4;
}






}

.floatleft
{
float:left;
padding:0px 5px 5px 5px;
}

.cleardescription
{
clear:left;
}


.newproducts
{
float:left;
}


   
ol {  
        margin:0; 
        padding:0;  
        list-style:none;  
   }   
   
li {  
	        
        list-style:none;
        margin-left: 20px ;
   }

JustLikeIcarus · December 3, 2009

OK found your issue.

.submit {
   font:bold 0.95em arial, sans-serif;
    border:none;
   
   height: 25px;
   background-color: #63D1F4;
}

}  <-- Whats that for?

.floatleft
   {
   float:left;
   padding:0px 5px 5px 5px;

}

deansaddigh · December 3, 2009

Hahaha you are wonderful.

It all works now thanks very much for helping.

Sign In

Simple float question

Recommended Posts

deansaddigh

Link to comment

Share on other sites

JustLikeIcarus

Link to comment

Share on other sites

deansaddigh

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

JustLikeIcarus

Link to comment

Share on other sites

deansaddigh

Link to comment

Share on other sites

JustLikeIcarus

Link to comment

Share on other sites

deansaddigh

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information