css styles in document head are not being applied

Question

My apologies if the question is too simple. I'm sure that it is, but I have put this code through the validator on W3C.org and looked through may of the related links and strings on this site, but I've found nothing that's given me any answers, at least that I can make sense of.

I have a very rudimentary html document with some css styles in the head. All I want to do is have the copy wrap around the image using a simple css style.

I'm just learning how do do this and am following an example from a book, but the code is not working as it's supposed to.

Here is my code. What am I doing wrong? (I'm using Chrome and Safari running on Yosemite. _____________________ beginning of code_____________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">

<head> 
<title>Float</title> 
<meta http-equiv="content-type"  content="text/html lang="en-US">

<style type="text/css"> 

.featureimage {   
float: left;   
width: 300px; 
}
p.copy {    
float: right;   
align: center; 
} 
</style>

</head>

<body> 
<h1>This Is A Very Large Housing D,evelopment.</h1>

<img src="BLDGS-300x200.jpg" width="300" height="200" alt="hi-rise" class="featureimage">


<p class="copy"> At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,  repellat… </p>

</body>

</html>

_________________ end of code ______________________

"HTML 4.01 Transitional" — This Doctype was designed to ease the transition from HTML 3.2 documents to HTML 4 and CSS. It should be avoided this century. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Introduction_to_HTML5 should be useful reading. — Quentin, Jan 07 '17 at 23:34
`` — The lang attribute states the language the content of the element is written in. `` is a void element. It has no content. The `lang` attribute (for a document written in only one language) belongs on the `` element. — Quentin, Jan 07 '17 at 23:35
You have a error in your CSS that a validator would pick up: https://jigsaw.w3.org/css-validator/ — Quentin, Jan 07 '17 at 23:36
You said you ran it through the validator, but https://validator.w3.org/nu/ picks up several errors in that code. — Quentin, Jan 07 '17 at 23:37
@Quentin I agree... but its a good habit to start/close all your tags (otherwise that mistake will happen again somewhere more important) — mike510a, Jan 08 '17 at 00:21
Quentin, Thanks for checking my code. I knew it must have been something really simple, but I just couldn't see it. I also appreciate your links to the validator and HTML 5 page. I'm a little behind. It's taken me a while to get back due to many distractions, both good and bad. — Claire Fontaine, Feb 01 '17 at 23:02

score 3 · Answer 1 · answered Jan 07 '17 at 23:43

Because you specified float: right on the paragraph, the rules for how it interacts with prior floating content change. This bumps it down to a new line.

Remove float:right and the text will wrap around the image.

align:center is invalid CSS. There is no such property as align.

score 0 · Answer 2 · answered Jan 07 '17 at 23:43

0

The default width for a <p> (and other block) element(s) in most browsers is 100%. Because of that, the text doesn't 'fit' next to the image and get pushed to the next row. Try giving the paragraph a width as well.

answered Jan 07 '17 at 23:43

Rijk

939
7
17

2

*The default width for a `
` (and other block) element(s) in most browsers is 100%* — Incorrect. The default width is `auto`
– Quentin Jan 07 '17 at 23:44

Saiful Islam · Answer 3 · 2017-01-07T23:55:18.910

-1

here is update code

        <!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>
        <title>Float</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <style type="text/css"> 

        .featureimage {   
        float: left;   
        width: 300px; 
        }
        p.copy {    
        float: right;   
        align: center; 
        } 
        </style>

        </head>

        <body> 
        <h1>This Is A Very Large Housing D,evelopment.</h1>

        <img src="BLDGS-300x200.jpg" width="300" height="200" alt="hi-rise" class="featureimage" />


        <p class="copy"> At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,  repellat… </p>

        </body>

        </html>

hope will be work fine !

edited Jan 07 '17 at 23:55

answered Jan 07 '17 at 23:31

Saiful Islam

39
1
7

2

That doesn't actually make a difference. – Quentin Jan 07 '17 at 23:32
I said it doesn't *make* a difference, not that your code isn't different. Fixing that error doesn't change the way the document is rendered. – Quentin Jan 07 '17 at 23:37
Hi,@Quentin Yes your right . i have learned something more form you :) – Saiful Islam Jan 07 '17 at 23:56
Hi,@Quentin missing was starting html and image tag . is it right ? – Saiful Islam Jan 08 '17 at 00:02
The HTML start tag is optional in HTML. The IMG tag wasn't missing. – Quentin Jan 08 '17 at 00:03

Woody · Answer 4 · 2017-01-08T04:04:46.870

What I would do to pass @ https://validator.w3.org/check (with two warnings) is simply use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head> 
<title>Float</title> 


<style type="text/css"> 
.featureimage {   
float: left;   
margin: 0 10px 10px 0;
}
</style>

</head>

<body> 

<h1>This Is A Very Large Housing D,evelopment.</h1>

<p><img src="building.jpg" width="300" height="200" alt="hi-rise" class="featureimage">
At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,  repellat… At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,  repellat… </p>

</body>

</html>

The warnings are related to:

No Character encoding declared at document level

No character encoding information was found within the document, either in an HTML meta element or an XML declaration. It is often recommended to declare the character encoding in the document itself, especially if there is a chance that the document will be read from or saved to disk, CD, etc.

See this tutorial (http://www.w3.org/International/tutorials/tutorial-char-enc/#Slide0250) on character encoding for techniques and explanations.

JSFiddle: https://jsfiddle.net/m3ea8nj8/

Why would you vote down? The lady asked "All I want to do is have the copy wrap around the image using a simple css style". that is what I showed. I also made the HTML pass so could place W3 badge on site. — Woody, Jan 08 '17 at 14:45

css styles in document head are not being applied

4 Answers4