Float Tutorial Simple Exercises Using Css Floats

ACTIVITY:

FLOAT TUTORIAL – SIMPLE EXERCISES USING CSS FLOATS

Exercise 1 - Floating an image to the right

In this exercise, you will force an image over to the right of a block of text to allow the content to flow alongside it. You will also add margins to the left and bottom sides of the image to push the content away. Finally, you will add a border around the image.

You will start with an image sitting inside a paragraph of text.

The image file, image.gif, can be located on the K:\ drive at K:\Sue Brandreth\Web Development\images.

The HTML code:

<img src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer etc…

To force the image over to the right edge, "float: right" is applied to the image using a class selector. In this case, the name of the class is ".floatright" to help illustrate the point, but any name can be used. However, it is better to name classes based on their meaning, rather than their appearance.

No width is needed in this instance as the image has an intrinsic width. If this were a div, a width would have to be used.

The CSS code:

.floatright {

float: right;

}

The HTML code:

<img class="floatright" src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer etc…

Margins can be added to push the content away from the left and bottom sides of the image.

You will use a shorthand rule here - "margin: 0 0 10px 10px;". Keep in mind that shorthand values are applied in a clockwise order - top, right, bottom, left.

The CSS code:

.floatright {

float: right;

margin: 0 0 10px 10px;

}

The HTML code:

<img class="floatright" src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer etc…

To add a border to the image, use "border: 1px solid #666;".

The CSS code:

.floatright {

float: right;

margin: 0 0 10px 10px;

border: 1px solid #666;

}

The HTML code:

<img class="floatright" src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer etc…

If you want the border to sit slightly off the edge of the image, use padding.

The CSS code:

.floatright {

float: right;

margin: 0 0 10px 10px;

border: 1px solid #666;

padding: 2px;

}

The HTML code:

<img class="floatright" src="images/image.gif" alt="" width="100" height="100">Lorem ipsum dolor sit amet, consectetuer etc…

Exercise 2 - Floating an image and a caption

In this exercise, you will float an image and caption to the right of a block of text to allow text to float around them and apply borders using descendant selectors.

You will start with an image and a paragraph of text.

The image file, image.gif, can be located on the K:\ drive at K:\Sue Brandreth\Web Development\images.

The HTMLcode:

<img src="images/image.gif" alt="" width="100" height="100"

Caption here

Lorem ipsum dolor sit amet, consectetuer etc…

</p

You will now add a <div> tag around the image.

The first modification is to the HTML code. Add a div around the image and caption. In this case, we are also adding a class selector to the div. "floatright" is used to help illustrate the point, but any name can be used. Remember, it is better to name classes based on their meaning - rather than their appearance.

The HTMLcode:

<img src="images/image.gif" alt="" width="100" height="100"

Caption here

</div>

Lorem ipsum dolor sit amet, consectetuer etc…

Apply "float: right" to the div. This will force the div over to the right edge of its containing box. A width is also required when floating an element - unless it is an image.

The CSS code:

.floatright {

float: right;

width: 100px;

}

Margins can be added to push the content away from the left and bottom sides of the div containing the image and caption.

We are using a shorthand rule here: "margin: 0 0 10px 10px;". Keep in mind that shorthand values are applied in a clockwise order; top, right, bottom, left.

The CSS code:

.floatright {

float: right;

width: 100px;

margin: 0 0 10px 10px;

}

You can add a background color to make the image and caption stand out from the overall page.

As you can see, it will not show on the page, except under the caption. This is fixed by adding some padding to the div.

The CSS code:

.floatright {

float: right;

width: 100px;

margin: 0 0 10px 10px;

background-color: #ddd;
}

You can add some padding to the div to extend the background colour.

The CSS code:

.floatright {

float: right;

width: 100px;

margin: 0 0 10px 10px;

background-color: #ddd;

padding: 10px;

}

To add a border to the div, use "border: 1px solid #666;".

The CSS code:

.floatright {

float: right;

width: 100px;

margin: 0 0 10px 10px;

background-color: #ddd;

padding: 10px;

border: 1px solid #666;

}

To add a border to the image, you can use a decendant selector rule. The image and caption are inside the div so they are decendants of the div. This means you can target the image with a rule "div img". The problem with this rule is that it will target any image inside any div. To be more specific, we can narrow down the selection by using "div.floatright img { border: 1px solid #ddd; }". This will target any image inside a div that is styled with a "floatright" class.

The CSS code:

div.floatright img {

border: 1px solid #000;

}

You may have noticed that the top of the paragraph of text and the div containing the image do not line up. This may be due to a margin on top of the paragraph.

Non-styled paragraphs generally have 1em margin on top and bottom - the equivalent of one line of text. If you want to remove this margin, use "p { margin-top: 0; }". When applied, the paragraph and div will be vertically aligned. Will this affect paragraphs on the page making them run directly under one another? The answer is no. As mentioned above, paragraphs have 1em margin on top and bottom. If top margins are removed, it will only affect the first paragraph inside a container. All other paragraphs will still be separated to a height of 1em via the bottom margin.

The CSS code:

p {

margin-top: 0;

}

Exercise 3 - Floating an image to the right

In this exercise, you will float a series of images down the right side of the page - with content flowing beside them.

We will start with a paragraph of text and a series of images.

We want to force the images over to the right to allow the content to flow alongside them. We also want to add margins to the left and bottom sides of the images to push the content away. We also want the images to sit stacked on top of each other down the right edge.

A class selector "floatright" has been applied to each of the images.

The HTML code:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

To force the images over to the right edge, "float: right" is applied to the class selector. No width is needed in this instance as the image has an intrinsic width. If this were a div, a width would have to be used.

The CSS code:

.floatright {

float: right;

}

Margins can be added to push the content away from the left and bottom sides of the images.

We are using a shorthand rule here: "margin: 0 0 10px 10px;". Keep in mind that shorthand values are applied in a clockwise order: top, right, bottom, left.

The CSS code:

.floatright {

float: right;

margin: 0 0 10px 10px;

}

To get the images to stack on top of each other, clear right must be applied to the "floatright" selector. This will force each image to move below the bottom outer edge of any right-floating image earlier in the source document.

The CSS code:

.floatright {

float: right;

margin: 0 0 10px 10px;

clear: right;

}

You may have noticed that the top of the paragraph of text and the "float: right" image do not line up. This may be due to a margin on top of the paragraph.

Non-styled paragraphs generally have 1em margin on top and bottom - the equivalent of one line of text. If you want to remove this margin, use "p { margin-top: 0; }".

The CSS code:

p {

margin-top: 0;

}

Exercise 4 - Floating inline list items

In this exercise, you will float a simple list, converting it into a horizontal navigation bar.

We will start with a simple unordered list. The <ul> is styled with an id selector (id="navlist").

The HTML code:

<li<a href="#">Item one</a</li>

<li<a href="#">Item two</a</li>

<li<a href="#">Item three</a</li>

</ul>

To remove the HTML list bullets, set the "list-style-type" to "none". To target the specific <ul>, we use "ul#navlist", otherwise all <ul>'s on the page would be affected.

The CSS code:

ul#navlist {

list-style-type: none;

}

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Firefox, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.

To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the <ul>.

The CSS code:

ul#navlist {

list-style-type: none;

margin: 0;

padding: 0;

}

To force the list into one line, apply "display: inline;" to the <li>. To target the specific list we use "ul#navlist li". This means we want to target the <li> element within the <ul> which has been styled with an id called "navlist".

The CSS code:

ul#navlist li {

display: inline;

}

When list items are converted to inline, they have a set amount of padding on their left edges that cannot be removed. To make the list items sit beside each other without any gap, they must be set to "float: left". At this stage we cannot see that the gap has closed.

A width is also required when floating an element - unless it is an image.

The CSS code:

ul#navlist li a {

float: left;

width: 5em;

}

At this point a background colour and text colour can be applied. There are many colour combinations that can be used.

The CSS code:

ul#navlist li a {

float: left;

width: 5em;

color: #fff;

background-color: #036;

}

To make each list item into a box, we need to add padding to the "a" state. In this case we are using a shorthand rule. The padding is set to 0.2em for the top and bottom and 1em for the left and right.

The CSS code:

ul#navlist li a {

float: left;

width: 5em;

color: #fff;

background-color: #036;

padding: 0.2em 1em;

}

At this point you may wish to remove the text underline. It is common practice for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behaviour (such as underlines) can be confusing for some users who may not realise that the item is a link.

The CSS code:

ul#navlist li a {

float: left;

width: 5em;

color: #fff;

background-color: #036;

padding: 0.2em 1em;

text-decoration: none;

}

A border is set to the right of the list items to separate them.

The CSS code:

ul#navlist li a {

float: left;

width: 5em;

color: #fff;

background-color: #036;

padding: 0.2em 1em;

text-decoration: none;

border-right: 1px solid #fff;

}

Use the "a:hover" to set a second background colour as a rollover state. If you roll over the list now you will see that the rollover works.

The CSS code:

ul#navlist li a:hover {

background-color: #369;

color: #fff;

}

To make the entire list into a navigation bar, we need to color the <ul> and stretch it to the full width of the browser window. Before we can do that, we need apply "float: left" to the <ul> - otherwise it will not show. Apply float to the <ul> and set the width to "100%".

A width is also required when floating an element - unless it is an image.