WEB I 06 - CSS

CSS Cascading Style Sheets

What is CSS?

Cascading Style Sheets (CSS) is the W3C-approved method for specifying and enriching the visual presentation of web pages.

CSS is not HTML but does enhance HTML by allowing you to redefine how pre-existing tags work.

A style sheet is written according to the grammar defined in the W3C CSS 1 or CSS 2 recommendations.

It can be contained in :

A text file (which has a .css suffix)

Embedded within <style> element contained within the <head> element

Inline within any element via the style= attribute.

Why CSS?

There are numerous advantages of using CSS:

Greater control over textual effects and page layout.

Separates document content (HTML) from its appearance (CSS).

Reducing duplication of style commands.

Increase ease in web site maintenance.

The disadvantages of CSS is:

Harder to learn than straight HTML

Some unevenness with browser support

IE prior to vers. 7 in particular has several CSS bugs

So why is separating appearance from content so important?

Currently (without CSS), the vast majority of a given HTML document’s markup is devoted to formatting/layout.

These types of documents are very hard to maintain and change.

Using markup, there is no easy way to replicate a design change over an entire site.

Using markup for layout (i.e., tables) creates fragile and hard to change layouts.

These documents are not accessible (i.e., not easily usable by people with visual disabilities).

These documents are hard to index (e.g., by search engines) accurately.

Google “is in effect the world’s most active blind user” (Meyer, 3).

Eric Meyer, Cascading Style Sheets, 2 nd Ed , (O’Reilly, 2004).

Example Problem What is the actual content of this document?

Example Problem

This page’s content:

Date

Image

News Navigation Links

Link Newsroom

Link Events

Link Media Centre

Link Mount Royal Experts

News & Events

Feature Story

Policy Studies program joins forces with Students' Association to host all-candidates debate

Just days before Canadians cast their votes in our federal election, Mount Royal College will host an all-candidates debate

Link

Image

Caption

Tami Rothery VP Student Life etc

Newsroom

Link

Link

Link

Link

Link

HTML for the Content

<div id=“news”>

<div id=“newsNavigationLinks”>

<ul>

<li><a href=???>NewsRoom</a></li>

<li><a href=???>Events</a></li>

etc

</ul>

</div>

<p>Date</p>

<img src=???>

<h1>News & Events</h1>

<div id=“story”>

<h2>Feature Story</h2>

<img>

<p id=caption>Tami Rothery VP Student Life etc</p>

<p><em>Policy Studies program joins forces with Students' Association

to host all-candidates debate</em></p>

<p> Just days before Canadians cast their votes in our federal

election, Mount Royal College will host an all-candidates debate</p>

<a href=???>More</a>

</div>

<div id=“newsLinks”>

<h2>Newsroom</h2>

<ul>

<li><a href=???>Current News</a></li>

<li><a href=???>News Archive</a></li>

etc

</ul>

</div>

</div>

Actual HTML (which contains content and presentation)

<table width="720" border="0" align="center" cellpadding="0" cellspacing="0" valign="top"><tr><td valign="top" width="620" height="9"><img src="images/spacer.gif" width="620" height="9" border="0"></td></tr><tr><td valign="top" width="620" height="29"><img src="images/spacer.gif" width="63" height="5" border="0"><script language="JavaScript"><small><font color='white' face='Arial' size='1'><b> January 11, 2006 </b></font></small></td></tr><tr><td valign="top" width="620" height="98"> <img src="images/spacer.gif" width="620" height="98" border="0" alt="News & Events"> </td></tr></table></td></tr></table><table width="720" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="100" valign="top" bgcolor="#003399"> <a href="newsroom.php" onMouseOver="document.ne_new.src='images/ne_newr.jpg'" onMouseOut="document.ne_new.src='images/ne_new.jpg'"><img src="images/ne_new.jpg" alt="Newsroom" title="Newsroom" name="ne_new" border="0"></a><br> <a href="events.php" onMouseOver="document.ne_eve.src='images/ne_ever.jpg'“ onMouseOut="document.ne_eve.src='images/ne_eve.jpg'"> <img src="images/ne_eve.jpg" alt="Events" title=" Events " name="ne_eve" border="0"></a><br>

<a href="mediarelations.shtml" onMouseOver="document.ne_med.src='images/ne_medr.jpg'" onMouseOut="document.ne_med.src='images/ne_med.jpg'"><img src="images/ne_med.jpg" alt="Media Centre" title="Media Centre" name="ne_med" border="0"></a><br><a href="experts.php" onMouseOver="document.ne_exp.src='images/ne_expr.jpg'" onMouseOut="document.ne_exp.src='images/ne_exp.jpg'"> <img src="images/ne_exp.jpg" alt="Mount Royal Experts" title="Mount Royal Experts" name="ne_exp" border="0"></a></td><td width="35" valign="top"><img src="images/homepage_top1.jpg"></td><td width="550" valign="top"><font face="arial" size="2"><img src="images/homepage_top2.jpg"><br><table width="550" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="355" valign="top" colspan="3"><img src="images/title_featurestory.jpg" alt=" Feature Story "></td><td width="35" valign="top"><img src="images/featureshadow1.jpg"></td><td width="160" valign="top"><img src="images/title_newsroom.jpg" alt=" Newsroom "></td></tr><tr><td width="355" height="163" valign="top" colspan="3" background="images/feature_bg.jpg"><table width="355" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td width="355" height="12" colspan="5" valign="top"><img src="images/spacer.gif" width="355" height="12" border="0"></td></tr><tr><td width="12" height="139" valign="top"><img src="images/spacer.gif" width="12" height="139" border="0"></td><td width="147" height="139" valign="top"> <img src="featurestories/images/candidatedebate.jpg" border="0" alt="Tami Rothery, V.P. Student Affairs and Jackie Chuckrey, SAMRC President overlook the location of the upcoming candidates debate."> </td><td width="12" height="139" valign="top"><img src="images/spacer.gif" width="12" height="139" border="0"></td><td width="171" height="139" valign="top"><font size="2" face="arial"><strong> Policy Studies program joins forces with Students' Association to host all-candidates debate </strong></font> <p><font size="1" face="arial"> Just days before Canadians cast their votes in our federal election, Mount Royal College will host an all-candidates debate...   > <a href="featurestories/candidatedebate.shtml">More</a></font></p> </td><td width="12" height="139" valign="top"><img src="images/spacer.gif" width="12" height="139" border="0"></td></tr><tr><td width="355" height="12" colspan="5" valign="top"><img src="images/spacer.gif" width="355" height="12" border="0"></td></tr></table></td><td width="35" valign="top"><img src="images/featureshadow2.jpg"></td><td width="160" valign="top"><font face="arial" size="1"><img src="images/spacer.gif" width="160" height="15"><br> <a href="newsroom.php">Current News</a> <img src="images/spacer.gif" width="160" height="5"><br> <a href="archive.php">News Archives</a> <img src="images/spacer.gif" width="160" height="5"><br> <a href="/alumni/e_news.shtml">Alumni News</a> <img src="images/spacer.gif" width="160" height="5"><br> <a href="http://cougars.mtroyal.ca/">Cougar News</a> <img src="images/spacer.gif" width="160" height="5"><br> <a href="/conservatory/news.php">Conservatory News</a> </font></td></tr></table>

Mixing Presentation with Content

Combining presentation and content makes the HTML harder to understand and to maintain.

Almost all of this sample consists of position markup (all the table tags), formatting markup, and gratuitous images (single pixels for spacing, simple text images for headings).

This little code snippet has 8 font tags: each one made the same change (white color, font name=Arial and size=small).

The entire page in fact had 20 font tags doing the same thing.

To change to a different color and font and size, we will have to change 60 attributes in a total of 20 tags.

With CSS, we can specify this font rule just once.

To make the same change we only have to make one change to three CSS rules.

In fact the entire main content pages (thousands of pages) of the www.mtroyal.ca site used to have tens of thousands of font tags, almost all of which were one of the following:

<font face="Arial, Helvetica, sans-serif" size=2>

<font face="Arial, Helvetica, sans-serif" size=1>

<font face="Arial, Helvetica, sans-serif">

<font face="Arial">

<font size=2>

<font size=1>

<font size=4>

<font face="Arial" size=2 bgcolor=white>

<font face="Arial" size=2 bgcolor=black>

<font face="Arial, Helvetica, sans-serif" size=2 bgcolor=black>

<font face="Arial, Helvetica, sans-serif" size=1 bgcolor=black>

To make a site-wide change to the font face, size, or color, for www.mtroyal.ca site would take hundreds of very tedious hours.

To change the font used in all the images would again take hundreds of very tedious hours

If the same site had been designed to separate presentation from content and to properly structured that content, the same change would take under a minute.

An entire site can use a single CSS file.

If the CSS is properly cascaded, we would only have to make a few changes to that one file.

What does cascading mean?

CSS are considered cascading because the styles can use a hierarchy which passes styles down to the elements.

Previously defined styles are applied unless a new, overriding style change is made.

What does cascading mean? body h1 p div id=news div id=story div id=story p font-face: Arial, Helvetica, sans-serif; color: black; font-size:14pt; font-size:10pt; font-size:12pt; font-weight: bold; background:white; position: relative; left: 125px; width: 200px font-weight: normal;

CSS Rules

Style sheets consist of one or more rules .

Each rule defines what an element should look like and how it should behave in the browser window.

The following contains two rules.

The first indicates that the use of h2 should result in the text being colored green. The second indicates text in a p tag should be 12pt Arial or some sans-serif font.

h2 { color: green; }

p { font-size: 12pt; font-face: Arial, sans-serif;

}

Replaced vs Nonreplaced Elements

Replaced elements

Element's content is replaced by something not contained within element's container.

E.g., img, input, textarea

Nonreplaced elements

Element's content is displayed inside an element box .

E.g., most XHTML tags

Block-Level vs Inline-Level elements

Block-level elements

Generate an element box that fills its parent element's content area.

That is, they generate "breaks" before and after the element box.

E.g. <p>, <div>, <ul>, <table>

Inline-level elements

Generate an element box within a line of text.

E.g., <a>, <span>, <strong>

Element Boxes

CSS assumes that every element generates a rectangular box called the element box (sometimes also called the box model ).

Each element box has

a content area,

a background color or image,

a margin,

a possible border

internal padding.

Element Box Molly Holzschlag,”Thinking Outside the Grid”, http://www.alistapart.com/articles/outsidethegrid

CSS Rule Placement

There are three ways in which rules can be applied to a document:

Inline styles

Embedded styles

External styles

Inline Styles

Are added to a tag via the style attribute.

<h2 style="color: green;">

<p style="font-size: 12pt; font-face: Arial, sans-serif;">

Affects only that instance of the tag.

Not recommended.

Embedded Styles

Are added in the head of the page and affects all instance of the defined tag.

<head>

<style type="text/css">

h2 { color: green; }

p { font-size: 12pt; font-face: Arial, sans-serif; }

</style>

</head>

External Styles

Are stored in an external file and linked or imported into a page.

Generally the best approach since a single external stylesheet file can be used in multiple pages.

They thus provide a way to achieve consistent styling across an entire site.

Two approaches

Linking

<head>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>

Importing

<style type="text/css">

@import url(styles.css);

@import url(colours.css);

</style>

CSS Rule Composition

A CSS rule is composed of two parts:

Selector

Declaration block

The selector defines which part of the document is to be affected.

The declaration block consists of one or more declarations.

Each declaration is separated by semicolons.

A declaration is a combination of CSS property and a value for that property.

h1 { color: green; font-size: 24pt; }

Declaration Block Declaration Selector property value

Selectors

Selectors are what connect the style definitions to the specific tags that are to be modified.

There are three forms of selectors:

HTML selectors

Class selectors

ID selectors

HTML Selectors

You have already seen HTML selectors. These are the styles that directly affect an HTML tag element.

h1 {color:red;}

These selectors can be grouped into comma-separated lists.

h2, h3, p {color:blue;}

You can also specify styles for a tag based on its context.

These are called contextual selectors (or descendent selectors ) and use spaces to separate the elements

e.g., the following makes emphasized text red when it is located in the context of (i.e., within) an h4 tag:

h4 em {color : red;}

<h4>This is <em>red</em></h4>

<em>This is not red</em>

Class Selectors

A class selector is used to specify the styles of elements that have been classified using the CLASS attribute in the HTML tags.

These allow you to define styles independently of the HTML elements.

.classname { property: value; } name of class selector list of property- value pairs period indicating a class selector

Class Selectors Examples

An HTML element can be classified using the class attribute. The following shows that two tag instances have been classified as warning tags:

<em class=“warning”>Do not apply to exposed skin.</em>

<h4 class=“warning”>Do not induce vomitting.</h4>

With these elements classified, we can set up a style for the class “warning”:

.warning { font-size: 36pt; color: red; }

We can also specify dependent classes to differentiate bold elements classified as warning and h4 elements classified as warning:

b.warning { font-size: 36pt; color: red; }

h4.warning { font-size: 48pt; color: red; }

ID Selectors

An ID selector is used to target specific instances (those with the ID) rather than classifying elements

#idname { property: value; } name of ID selector list of property- value pairs # symbol indicating an ID selector

ID Selectors Examples

An HTML element can be identified using the id attribute.

The following shows that this tag instance has been identified with the value 5511:

<p id="5511">hot sales on now!</p>

With this element identified, we can set up a style for the id “5511”:

#5511 { font-style: italic; color: blue; }

ID Selectors Examples

We can also specify dependent identifiers.

p.5511 { font-style: italic; color: blue; }

Class versus ID selectors

Classes can be applied to any number of elements.

Use classes to style a number of different but related elements.

IDs are used once and only once in an HTML document.

Use ids to style a unique element uniquely.

Font Formatting with CSS

font formatting properties and possible values.

font-family: [family name] , [family name] , etc

font-size: [height] | [percentage] | small | medium | large | smaller | etc

font-style: italic | oblique | normal

font-weight: normal | bold | bolder | lighter | etc

font-variant: small-caps | normal

font: [font-style]|[font-weight] [font-size][/line-height] [font-family]

Font Formatting with CSS

The font-family property should always specify a generic font family name in case the computer viewing the page does not have one of the specified fonts.

font-family: Arial, Tahoma, sans-serif;

The font property allows you to combine multiple font styles into one declaration.

font: bold 12pt Arial, Tahoma, sans-serif;

Generic family name

Platform Considerations

Do not assume that a font you have is one that is on the viewer's computer.

Fonts common (for most users) to both Mac and Windows:

Arial, Arial Black, Arial Narrow, Comic Sans, Courier New

Georgia, Impact, Tahoma, Times New Roman

Trebuchet MS, Verdana

CSS Sizes

Font sizes (and all CSS sizes) can be specified using absolute or relative units

Relative

smaller , larger keywords

Percentages

em value

This is the height of the character box for the font

Absolute

small , medium , large , etc keywords.

Inches ( in ), points ( pt ), pixels ( px ), etc.

Sizing Fonts

Generally, the most common approach is to set the size in pixels.

h2 { font-size: 18pt; }

Advantage is that the designer has complete control over what the user sees in terms of the size of the font.

Any problems with this?

Sizing Fonts

Not all users have the same eye strength.

Browsers provide user with ability to resize font size.

Unfortunately, with IE 6 and 7, if the page's CSS uses pixel unit to set font size then the text will not be resized.

Sizing Fonts

It is better to use a relative unit for sizing fonts, even though it is initially a bit tricky.

Three approaches

Use keywords ( x-small, small, medium, large , etc)

Unfortunately not as much control over ultimate size due to limited number of sizes.

Use em unit

h2 { font-size: 1.5 em; }

Use percentage size

h2 { font-size: 120%; }

Percentage Size

This is a percentage of the elements parent's font size.

<body>

<div id="logo">

<h2>Book Rep System</h2>

</div>

<h2>Technical Books</h2>

<p>Here is some regular text</p>

<p class="dwarf">really small</p>

</body>

body { font-size: 10px; } #logo { font-size: 150%; } h2 { font-size: 200%; } .dwarf { font-size: 75%; } 20px (10 * 2.00) 30px ( (10*2.00)* 1.5 ) 10px 7.5px (10 * 0.75)

Percentage Size

Unfortunately, the previous example doesn't allow resizing due to absolute setting of body font size.

Instead, we should use a relative setting for the body.

Percentage Size body { font-size: 10px; } body { font-size: 100%; } #logo { font-size: 150%; } h2 { font-size: 200%; } .dwarf { font-size: 75%; } body { font-size: small; } #logo { font-size: 150%; } h2 { font-size: 200%; } .dwarf { font-size: 75%; }   

Percentage Size

Advantage to this approach is that you can change the overall size of text in your site by making just one change: the font-size of the body.

Disadvantage is that it can get quite complicated with percentages and nested elements.

Em sizes

As an alternative to percentages, you can use em sizes.

An em unit when used for sizing fonts is relative to the baseline size of the parent.

If the parent of an element has a font size of 14 pixels, then 1em is 14 pixels; if the font size is 24 pixels, then 1 em is 24 pixels.

Most browsers have a default font size of 1em (about 16 pixels).

em sizes body { font-size: 1em; } #logo { font-size: 1.2em; } h2 { font-size: 1.5em; } .dwarf { font-size: 0.75em; }

<body>

<div id="logo">

<h2>Book Rep System</h2>

</div>

<h2>Technical Books</h2>

<p>Here is some regular text</p>

<p class="dwarf">really small</p>

</body>

24px (16 * 1.5) 28px ( (16*1.2)* 1.5 ) 16px 12px (16 * 0.75)

Conclusion: Font Sizes

Set the base body font-size relatively (i.e., using keyword, em, or percentage).

Use percentage or em for all other sizes, remembering that they are relative to the size set for the body .

Text Formatting

text formatting properties and possible values.

text-indent: [length] | [percentage]

letter-spacing: [length] | normal

word-spacing: [length] | normal

text-decoration: none | underline | line-through | overline

line-height: [height] | [percentage] | normal | etc

text-transform: uppercase | lowercase | capitalize | none

text-align: left | center | right | justify

vertical-align: middle | bottom | top | etc

Just as with font sizes, you should use relative units (percentage or em) for lengths.

Document Structure

As mentioned, XHTML should describe the structure and content of the document, while CSS describes its appearance.

Understanding this XHTML structure is a necessary part of mastering CSS.

XHTML documents contain a hierarchy of elements

Document Structure body is the parent of ul ul is a child of body img is a descendent of body body is an ancestor of img html head title link h1 body p a ul li li a img

Descendant Selectors

These are rules that operate only in specific structural situations.

For instance, in the example below, let's change only the <h2> element within the <div> to green 24pt text.

To do so, we can use a descendant selector

<div id="logo"> <h1>Pearson Education</h1> <h2>Book Rep System</h2> </div> <h2>Technical Books</h2> div h2 {color: green; font-size: 24pt; } h2 within a div

Other Contextual Selectors

Other ways of selecting:

child selector

Id contextual selector

<div id="logo"> <h1>Pearson Education</h1> <h2>Book Rep System</h2> </div> <h2>Technical Books</h2> div>h2 {color: green; font-size: 24pt; } h2 is child of div NOT Supported by IE 6 or earlier div#logo h2 {color: green; font-size: 24pt; } h2 is descendant of a div with an id of logo .

Pseudo Elements

Pseudo classes are used to add special effects to some selectors.

Anchor

A link that is active, visited, unvisited, or when you mouse over a link can all be displayed in different ways.

E.g.

a:link {color: blue;}

a:visited {color: purple;}

a:hover {color: red; text-decoration: none; font-weight:bold; }

a:active {color: olive}

Order of these is important

Link, visited, hover, active

Element Boxes

CSS assumes that every HTML element exists in a rectangle called the element box.

This is a content area. CSS assumes that every HTML element exists in a rectangle called the element box. padding margin border Element box Background image and/or color height width

Element Box

You can adjust the following parts of the box with CSS

Width and Height

Border

Thickness, style, and color of the border

Margin

Set the distance between the box and adjacent element's boxes

Padding

Set the distance of the content from the border of the box

Width and Height

You can change the width and height of the element box in quite a few different ways.

The most straightforward way is via the width and height properties

H1 { width: 50%; height: 25px; }

Remember, the width and height properties set the size of the content area, not the element box itself.

This is a content area. CSS assumes that every HTML element exists in a rectangle called the element box. padding margin height width

Width and Height

Unfortunately, the width and height properties have a different meaning in CSS standard than in IE 5 or IE 6 in quirks mode.

Recall that unless you have a valid DOCTYPE specifying xhtml strict or xhtml transitional DTD, IE will display document in quirks mode.

For IE in quirks mode, width and height refer to the element box not to the content area.

Border

Can specify each axis individually, e.g.

border-top-style: dashed;

border-left-color: red;

border-right-width: 5px;

Can specify all 4 axis at once identically, e.g.

border-style: solid;

border-color: green;

Can specify multiple axis at once individually, e.g.

border-width: 2px 3px 4px 5px;

property: top right bottom left

border-color: green red;

Can also specify multiple properties at once

border: 1px double green;

border: width style color;

TR ou BL e green red green red TOP right bottom left

Padding

The space between the border and the content area

Can specify each side individually or all at once, e.g.,

padding-top: 5px;

padding: 3px 2px 5px 4px;

Default is no padding

If you have a border on box containing text, it is a good idea to add padding.

TOP right bottom left

Margins

Margins provide separation between element boxes

Can specify each side individually or all at once, e.g.,

margin-top: 5px;

margin: 3px 2px 5px 4px;

Margin Demo <style> * { border: 1px solid black; margin: 0; } </style> <style> * { border: 1px solid black; } </style> <h1>Margin demo</h1> <p>Cascading Style Sheets (CSS) is the W3C-approved method for specifying and enriching the visual presentation of web pages.</p> <p>CSS is not HTML but does enhance HTML by allowing you to redefine how pre-existing tags work. A style sheet is written according to the grammar defined in the W3C CSS 1 or CSS 2 recommendations. </p>

Collapsing Margins <style> div { border: 1px solid black; margin: 0;} p { background-color: silver; height: 50px; margin-top: 50px; margin-bottom: 0px; } </style> <div>before</div> <p>line one</p> <p>line two</p> <p>line three</p> <div>after</div> <style> div { border: 1px solid black; margin: 0;} p { background-color: silver; height: 50px; margin-top: 50px; margin-bottom: 20px; } </style> Notice that vertical margins collapse!!! When top and bottom margins meet they overlap until one of the margins touches the border of the other element.

Padding versus Margins padding margin

Element box size revisited

Recall that in CSS standard, the width and height properties set the size of the content area, not the element box itself.

Any padding or borders increases the size of the element box

However, with IE in quirks mode (or version 5), the width and height indicate the size of the element box.

Padding and borders thus shrinks the size of the content area.

Containing Boxes

Block boxes act as a containing block for any boxes within them.

<div>

This is the first sentence.

<p>This is the second sentence.</p>

</div>

In this code, the div element establishes a containing block for both the first string of text and the P element.

The p element in turn creates a containing block for the second text string.

Positioning

You can change the position of an element box via the position , top , left , bottom , and right properties.

position property values

static

Each position is laid out based on the normal flow of the document (default)

relative

Moves an element relative to its normal (static) position.

absolute

Moves an element absolutely relative to its containing block, and not relative to the page or window.

fixed

Moves an element absolutely relative to the browser window so that the element never moves, even when the page is scrolled (not supported in IE 6 or lower).

This can be used to replicate HTML frames in CSS

Static Positioning

Element boxes flow vertically starting at the top of their containing block with each placed directly below the preceding one.

Inline boxes flow horizontally from left to right.

Positioning

positioned elements are placed in relation to their containing blocks (but are not confined by this containing block).

Fixed

Containing block is browser window

Absolute

Containing box is closest positioned ancestor.

If there is no positioned ancestor, the initial containing block is the browser window.

Relative

Does not have a containing block.

It is positioning away from its normal (static) position.

Remember that relative moves an element relative to its normal position <style type="text/css"> #logo { border: 1px solid black; width: 300px; height: 100px; position: absolute; top: 200px; left: 100px; } #logo h2 { position: relative ; top: 20px; left: 100px; } </style> Without #logo h2 positioning <body> <div id="logo"> <h1><span>Pearson Education</span></h1> <h2><span>Book Rep System</span></h2> </div> </body> 100px 20px

Floats

Floating is achieved by setting the float property on an element's style to either left or right .

When specified, the element box is

positioned vertically as it would be within the normal flow, its top aligned with the top of the current line box.

positioned horizontally, it is shifted as far to the right or left of its containing block as possible.

Floats

Floated boxes will move to the left or right until their outer edge touches the containing block edge or the outer edge of another float.

Surrounding inline content is then allowed to flow around the opposite side.

Content flows down the right side of a left-floated box

Content flows down the left side of a right-floated box.

Float Tutorial <body> <div class="sample"> <img src="images/image.gif" alt="" width="100" height="100"><br> Caption here </div> <p> Lorem ipsum dolor sit amet, consectetuer ... </p> </body> http://css.maxdesign.com.au/floatutorial

Float Tutorial http://css.maxdesign.com.au/floatutorial .sample { float: right; width: 100px; } This will force the div over to the right edge of its containing box (which in this case is the body). A width is also required when floating an element - unless it is an image. <body> <div class="sample"> <img src="images/image.gif" alt="" width="100" height="100"><br> Caption here </div> <p> Lorem ipsum dolor sit amet, consectetuer ... </p> </body>

Floats

If there isn't enough horizontal room on the current line for the floated box, it will move downward, line by line, until a line has room for it.

http://css.maxdesign.com.au/floatutorial

Floats

Block level elements above a floated element will not be affected by it.

Elements below will wrap around the floated element.

While content will wrap around a floated element, border, background image and background color will extend underneath.

http://css.maxdesign.com.au/floatutorial

Clear

If you do not want elements below a floated element to wrap around it, you can apply the clear property to the element after the floated element.

use clear: left , clear: right or clear: both

<div class="sample"></div> <p class="highlight">Lorem ipsum dolor …</p> .sample { float: left; width: 100px; height: 100px; border: 2px solid #F63; } p { background-color: #ccc; clear: left; } http://css.maxdesign.com.au/floatutorial

Clear