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
<!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>
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.
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:
<!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>
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:
p.clear {
clear: both;
}
Now it says—“Find a paragraph with a class of “clear” and do the following …”
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.
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.
Use the W3C valuidators for HTML and [URL=“http://jigsaw.w3.org/css-validator/”]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.
after left, not a colon (:).
“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.