SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast An Alien's Avatar
    Join Date
    May 2011
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text Not Floating Around Image Help!

    Hello, my problem is that I'm trying to float my image to the left so that my text can flow around it. But for some reason, my paragraphs are under the floated image, and do not flow around it like it's supposed to. I'm new to CSS so please help me out
    HTML Code:
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    	   
    <html>
    
    <head>
    
    	<title>Floating Test</title>
    	
    	<style type="text/css">
    		.box {
    			background: blue;
    			padding; 5px;
    			width: 600px;
    			padding-bottom: 6px;
    		}
    		
    		.floated-img {
    			background: green;
    			width: 100px;
    			float: left:
    			
    		}
    		
    		.box h1 {
    			
    			margin-top: 0px;
    			text-align: center;
    			padding: 20px 20px  0 20px;
    			background:red;
    		}
    		
    		.box p {
    			width:300px;
    			background:yellow;
    		}
    		
    		
    	</style>
    	
    </head>
    
    <body>
    
    	<div class="box">
    		
    		<h1>Let's Test Some Floats!</h1>
    		
    		<img class="floated-img" src="http://yourimg.in/m/yb0c21n.gif" />
    		
    		<p>Some text for a paragraph that I am writing. It is so I can test out padding. 
    		I just pressed enter to form a new line. 
    		Again, I pressed enter. Now I am close to ending this paragraph. 
    		Last time I press enter. And now I finally say goodbye to this dummy paragraph.
    		</p>
    		
    		<p>Some text for a paragraph that I am writing. It is so I can test out padding. 
    		I just pressed enter to form a new line. 
    		Again, I pressed enter. Now I am close to ending this paragraph. 
    		Last time I press enter. And now I finally say goodbye to this dummy paragraph.
    		</p>
    		
    	</div>
    
    
    </body>
    
    </html>

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    256 Post(s)
    Tagged
    5 Thread(s)
    I think your problem may lie in this line
    Code:
    float: left:
    You should have a semi-colon (;) after left, not a colon (:).

  3. #3
    SitePoint Enthusiast An Alien's Avatar
    Join Date
    May 2011
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much! A little colon gave so much confusion, haha. Is there any IDE/HTML-CSS editor that picks up errors like these other than WYSWYG editors? Right now, I'm using notepad++. I'm not sure if it warns you of these errors.

  4. #4
    SitePoint Enthusiast An Alien's Avatar
    Join Date
    May 2011
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I did some more practicing with floats and I'm testing out the clear property. I tried clearing the second paragraph so it would drop down. But it looks like it's not working. Updated code:
    HTML Code:
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    	   
    <html>
    
    <head>
    
    	<title>Padding Test</title>
    	
    	<style type="text/css">
    		.box {
    			background: blue;
    			padding; 5px;
    			width: 900px;
    			padding-bottom: 6px;
    			margin: 0 auto 0 auto;
    			height: 600px;
    		}
    		body {background: black;}
    		
    		.floated-img {
    			background: blue;
    			width: 100px;
    			float: left;
    			margin: 20px;
    			
    		}
    		
    		.box h1 {
    			
    			margin-top: 0px;
    			text-align: center;
    			padding: 20px 20px  0 20px;
    			background: blue;
    		}
    		
    		.box p {
    			background: blue;
    			padding: 0px;
    			margin: 10px;
    			
    		}
    		.clear p {
    			clear: both;
    		}
    		
    		
    	</style>
    	
    </head>
    
    <body>
    
    	<div class="box">
    		
    		<h1>Padding</h1>
    		
    		<img class="floated-img" src="http://yourimg.in/m/yb0c21n.gif" />
    		
    		<p>Some text for a paragraph that I am writing. It is so I can test out padding. 
    		I just pressed enter to form a new line. 
    		Again, I pressed enter. Now I am close to ending this paragraph. 
    		Last time I press enter. And now I finally say goodbye to this dummy paragraph.
    		</p>
    		
    		<p class="clear">Some text for a paragraph that I am writing. It is so I can test out padding. 
    		I just pressed enter to form a new line. 
    		Again, I pressed enter. Now I am close to ending this paragraph. 
    		Last time I press enter. And now I finally say goodbye to this dummy paragraph.
    		</p>
    		
    	</div>
    
    
    </body>
    
    </html>

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    This rule:

    Code:
    .clear p {
      clear: both;
    }
    is saying—"Find an element with a class of "clear". Inside that element, find a <p> and apply this style to it. But that's not what you have in your HTML. You have a paragraph with a class of "clear". So the CSS should read:

    Code:
    p.clear  {
      clear: both;
    }
    Now it says—"Find a paragraph with a class of "clear" and do the following ..."

  6. #6
    SitePoint Enthusiast An Alien's Avatar
    Join Date
    May 2011
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ralph, that fixed it. Really appreciate the help.

  7. #7
    SitePoint Enthusiast agrable's Avatar
    Join Date
    Nov 2009
    Location
    California, USA
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the future, why not do it "in line"? Something like mentioning the image source, then inserting a "style=float:left; padding=10px" command in there? Might be easier and more customizeable.

  8. #8
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,088
    Mentioned
    256 Post(s)
    Tagged
    5 Thread(s)
    Quote Originally Posted by agrable View Post
    In the future, why not do it "in line"?
    Because that defeats the purpose of using CSS to separate your styles from your markup. Set the style once in a stylesheet and it will apply to every instance of that class, id, element or whatever throughout your site. If you decide to change your styles, you only need to change it in one place. Using inline styles means you have to go through the entire site for every change and makes it a nightmare to maintain.

    Quote Originally Posted by An Alien View Post
    Thank you so much! A little colon gave so much confusion, haha. Is there any IDE/HTML-CSS editor that picks up errors like these other than WYSWYG editors? Right now, I'm using notepad++. I'm not sure if it warns you of these errors.
    Use the W3C valuidators for HTML and CSS. They'll alert you to invalid code, including typos - although it may take a little practice to get used to interpreting the results. "Parse error" in the CSS validator very often means something like you have here - a colon instead of a semi-colon, no closing bracket or something like that. If you need help with it, feel free to post back here.

  9. #9
    SitePoint Enthusiast An Alien's Avatar
    Join Date
    May 2011
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Techno Bear. I will use validation from now on.


Bookmarks

Posting Permissions

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