Marusya's School Notes

Float Captioned Image

This demonstrates how to make an image with a caption float to the right:

HTML file:	Displayed by browser:
<style> div { float: right; width: 120px; margin: 0 0 15px 20px; padding: 15px; border: 1px solid black; text-align: center; } span { color:blue; } </style> <body> <div><img src="../html_beg/images/w3schools.jpg" width="104" height="142"><br />CSS is fun!</div> <p><span>The <div> has no top and right margins, but it does have a bottom margin of 15 pixels, and a left margin of 20 pixels. It also has a padding all around the image of 15 pixels, inside the border. The image is 104 wide and appears to be placed center of the 120 pixel wide "content" container of the <div> element... </span>This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text.</p> </body>	CSS is fun! The <div> has no top and right margins, but it does have a bottom margin of 15 pixels, and a left margin of 20 pixels. It also has a padding all around the image of 15 pixels, inside the border. The image is 104 wide and appears to be placed center of the 120 pixel wide "content" container of the <div> element... This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text.

HTML file:

Displayed by browser:

<body>
<div><img src="../html_beg/images/w3schools.jpg" width="104" height="142"><br />CSS is fun!</div>
<p><span>The <div> has no top and right margins, but it does have a bottom margin of 15 pixels, and a left margin of 20 pixels. It also has a padding all around the image of 15 pixels, inside the border. The image is 104 wide and appears to be placed center of the 120 pixel wide "content" container of the <div> element... </span>This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text.</p>
</body>

CSS is fun!

The <div> has no top and right margins, but it does have a bottom margin of 15 pixels, and a left margin of 20 pixels. It also has a padding all around the image of 15 pixels, inside the border. The image is 104 wide and appears to be placed center of the 120 pixel wide "content" container of the <div> element... This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text. This is more text.

Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. These properties do not apply to the padding, border nor margin.