IMG float:left margin-right:100px and P clear:right

img float: right; margin-right: 50px and P clear:left; padding-right: 15px; margin-left: 200px;

Playing around with float and clear. The copy begins aligned with the top of the image. You can add break tags or padding-top to align the copy with the bottom of the image. The clear and float properties are not reserved for img. They can also be used with blocks of copy to nest one inside the other. IMG float: left; margin-left: 50px; margin-right: 50px; and P clear:right; padding-left: 15px;

Playing around with float and clear. The copy begins aligned with the top of the image. Here I added six BR tags between the IMG and the P. The clear and float properties are not reserved for img. They can also be used with blocks of copy to place one beside the other. IMG float: left; margin-left: 50px; margin-right: 50px; and P clear:right; padding-left: 15px; and six BR tags added after image

Playing around with float and clear. The copy begins aligned with the top of the image. You can add padding-top to make the copy start below the top of the image. Here I've added padding-top:70px. The clear and float properties are not reserved for img. They can also be used with Heads and copy to position them. IMG float: left; margin-left: 50px; margin-right: 50px; and P clear:right; padding-left: 15px; padding-top: 70px;

This paragraph is set to clear:both. It sits below two images one floats left and one floats right.

This paragraph is set to clear:none. It sits between two images one floats left and one floats right. The overflow runs below the two images.

Sometimes these properties seem to push other elements out of the way. Some find it easier to manage page elements with tables. But don't forget; your table doesn't display anything untilthe entire thing loads. A big table can take a while to display. IMG float: right; margin-left: 60px; and P clear:right; margin-left: 60px; margin-right: 70px;

Sometimes these properties seem to push other elements out of the way. Some find it easier to manage page elements with tables. IMG float: right; margin-left: 60px; and P clear:none; margin-left: 60px; margin-right: 70px;

Float and clear are a little tricky to use. The way they display seems to change with the resizing of the page. (float: right; margin-left: 30px; border: thick double red; height: 100px; width: 200px; overflow: scroll; padding-left: 10px; margin-bottom: 10px;)

You can add width and height declarations to one paragraph to make it behave more like an image. Defining its dimensions keeps it static while the other paragraph shrinks and grows with page resizing. Changing the font or color of one paragraph will help distinguish it from the other. Or applying the overflow property which we will learn in week 5 can put one paragraph in its own little scrolling box. I'll bet my friends with NN4 can't see the scrolling box. (clear:left; margin-left: 60px; margin-right: 70px; font: normal normal bold medium Arial, Helvetica, Sans-Serif;)

You can add width and height declarations to one paragraph to make it behave more like an image. Defining its dimensions keeps it static while the other paragraph shrinks and grows with page resizing. Changing the font or color of one paragraph will help distinguish it from the other. Using margins and padding can help. Be sure to keep track of your lefts and rights. (clear:left; margin-left: 60px; margin-right: 70px; font: normal normal bold medium Arial, Helvetica, Sans-Serif;)

Float and clear are a little tricky to use. The way they display seems to change with the resizing of the page. (float: right; margin-left: 30px; height: 150px; width: 200px; margin-bottom: 10px;)

You can add width and height declarations to one paragraph to make it behave more like an image. Defining its dimensions keeps it static while the other paragraph shrinks and grows with page resizing. Changing the font or color of one paragraph will help distinguish it from the other. (clear:left; margin-left: 60px; margin-right: 70px; font: normal normal bold medium Arial, Helvetica, Sans-Serif; color: red;)

Float and clear are a little tricky to use. The way they display seems to change with the resizing of the page. (float: left; margin-right: 20px; height: 150px; width: 200px; margin-bottom: 10px;)

Float and clear are a little tricky to use. The way they display seems to change with the resizing of the page. Here I have eleiminated the height declaration.(float: left; margin-right: 20px; width: 200px; margin-bottom: 10px;)

This is an H1 head floating right

This paragraph is set to clear left.