Lecture Summary 4a

Prepared by: Anthony Larrain


Announcements


Project 1 Comments


Float and Clear

When elements, in particular, images are floated (left or right ) elements following the image will line up next to the image. If you want an element to appear underneath the image then you have to clear that element.

Example

Suppose a CSS class selector has been written to float images left.

.leftfloat { float:left; margin-right:15px; margin-bottom:15px; }

Suppose we wanted to display two pictures underneath each other separated by a horizontal rule with a short description along side each picture

Here is the code.

<img class="leftfloat" src="house.gif" width="250" height="164"/> <p>I lived in this house from 1962 - 1972. Some people say it was haunted</p> <hr /> <img class="leftfloat" src="house2.gif" width="250" height="254"/> <p>I lived in this house from 1972 - 1976. Pretty cool !</p> <hr /> <p>Both of these houses ......</p>

Browser Display

I lived in this house from 1962 - 1972. Some people say it was haunted


I lived in this house from 1972 - 1976. Pretty cool !


Both of these houses ......

Note: Since there is not enough text to wrap around the first image, the next element, which is a horizontal rule will line up next to the image. Also the second picture lines up next to the first picture.

Since we want the horizontal rule and subsequent elements to go underneath image we must clear the horizontal rule.

Need to write a class selector to clear the elements

.clear { clear:both; }

Now to clear the horizontal rule we write.

<hr class="clear" />

Browser Display

I lived in this house from 1962 - 1972. Some people say it was haunted


I lived in this house from 1972 - 1976. Pretty cool !


Both of these houses ......

Note: you can clear any element.


Working With FrontPage 2003

@Anthony Larrain 2005 - 2006

Send Questions or Comments to hci201@yahoo.com