CSCI N241: Fundamentals of Web Design Copyright ©2006  Department of Computer & Information Science Using CSS for Float Layouts

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Goals By the end of this lecture, you should understand … … how elements in a web page flow in a normal layout.… how elements in a web page flow in a normal layout. … how block and inline elements flow around floated elements.… how block and inline elements flow around floated elements. … how to build a Liquid Layout.… how to build a Liquid Layout. … how to build a Frozen Layout.… how to build a Frozen Layout. … how to build a Jello Layout.… how to build a Jello Layout.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science What is Flow? Flow describes the way in which the browser positions elements in a web page.Flow describes the way in which the browser positions elements in a web page. The browser positions block elements on top of one another, with a blank line between them. Block elements never give up their vertical position as a browser resizes.The browser positions block elements on top of one another, with a blank line between them. Block elements never give up their vertical position as a browser resizes. The browser positions inline elements right to left. As the browser collapses, it will re- position inline elements on new lines, as needed.The browser positions inline elements right to left. As the browser collapses, it will re- position inline elements on new lines, as needed.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Flow & Margins When two inline elements are side by side, the flow of the web page will respect each element's margin.When two inline elements are side by side, the flow of the web page will respect each element's margin. However, when we place two block elements on top of one another (or side by side), the flow will collapse the smallest of the two margins. The two elements will share the largest margin.However, when we place two block elements on top of one another (or side by side), the flow will collapse the smallest of the two margins. The two elements will share the largest margin.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Flow & Nested Block Elements When we nest a block element inside another, flow will still collapse the smallest margin.When we nest a block element inside another, flow will still collapse the smallest margin. However, if either of the elements has a border, the margins remain intact.However, if either of the elements has a border, the margins remain intact. Why? The margins don't touch one another.Why? The margins don't touch one another.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Floating an Element The float property "takes an element and floats it as far left or right as it can."The float property "takes an element and floats it as far left or right as it can." To float an element:To float an element: 1.Give the element an identity (id). 2.Give the element a width. 3.Move the element's code directly below the element under which you want the floated element to appear. 4.Add a float property to element's style.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Float … the Browser's View The browser renders elements using flow, from top to bottom.The browser renders elements using flow, from top to bottom. When the browser encounters a floated element, it removes that element from the flow of the page.When the browser encounters a floated element, it removes that element from the flow of the page. Since the browser removes the floated element from the normal flow, block elements "fill in" behind the floated element.Since the browser removes the floated element from the normal flow, block elements "fill in" behind the floated element. continued …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Float … the Browser's View The block level elements ignore the floated element's borders.The block level elements ignore the floated element's borders. However, the inline elements (text, images, etc) contained in those block elements respect the floated element's borders and flow around it.However, the inline elements (text, images, etc) contained in those block elements respect the floated element's borders and flow around it.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try One! Download and expand the file " n241AdvPageLayoutFloat_Examples.zip."Download and expand the file " n241AdvPageLayoutFloat_Examples.zip." Examine the file " Head First Lounge/lounge.html."Examine the file " Head First Lounge/lounge.html." Move the elixirs below the music recommendations and then save and view the file. Where did it position?Move the elixirs below the music recommendations and then save and view the file. Where did it position? Now, move the elixirs back, turn off styles and then check it out!Now, move the elixirs back, turn off styles and then check it out!

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try Another Edit the " Starbuzz/index.html " file. Move the sidebar just below the header.Edit the " Starbuzz/index.html " file. Move the sidebar just below the header. Now, edit " Starbuzz/css/starbuzz.css " by adding the following declarations to the #sidebar rule: width : 280px; float: right;Now, edit " Starbuzz/css/starbuzz.css " by adding the following declarations to the #sidebar rule: width : 280px; float: right;

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Defining a Boundary Between Columns Right now the Starbuzz page looks as if the backgrounds of the main and the sidebar blend with each other.Right now the Starbuzz page looks as if the backgrounds of the main and the sidebar blend with each other. How can we fix this? We need to redefine the right margin of the main at least as large as the width of the sidebar. Edit the following declaration in the #main rule: margin: 0px 330px 10px 10px;How can we fix this? We need to redefine the right margin of the main at least as large as the width of the sidebar. Edit the following declaration in the #main rule: margin: 0px 330px 10px 10px;

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The Overlap Problem With wider resolutions, the sidebar might overlap the footer due to the flow of the block elements.With wider resolutions, the sidebar might overlap the footer due to the flow of the block elements. How can we fix this? We can add a clear property to the footer …How can we fix this? We can add a clear property to the footer …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The clear Property With the clear property, we can specify that no floating content may be on the right, left or both sides of an element.With the clear property, we can specify that no floating content may be on the right, left or both sides of an element. Find the #footer class and add the following declaration: clear: right;Find the #footer class and add the following declaration: clear: right;

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Looks Good So Far, But … Try turning off the CSS for the Starbuzz page. What are the problems?Try turning off the CSS for the Starbuzz page. What are the problems? Let's try swapping the sidebar with the main.Let's try swapping the sidebar with the main. Then make the changes to your CSS depicted in the next few slides …Then make the changes to your CSS depicted in the next few slides …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Adjusting #sidebar Delete the width & float declarations from the #sidebar class.Delete the width & float declarations from the #sidebar class. Edit the margin declaration to look like this: margin: 0px 10px 10px 470px;Edit the margin declaration to look like this: margin: 0px 10px 10px 470px;

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Adjusting #main & #footer In the #main rule, edit the margin declaration to look like this: margin: 0px 10px 10px 10px;In the #main rule, edit the margin declaration to look like this: margin: 0px 10px 10px 10px; Add the following declarations to the #main rule: width: 420px; float: left;Add the following declarations to the #main rule: width: 420px; float: left; Change the clear property of the #footer rule to read: clear: left;Change the clear property of the #footer rule to read: clear: left;

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Liquid Layouts So far, we've been working with liquid layouts. Liquid layouts fill whatever width is left when the browser resizes.So far, we've been working with liquid layouts. Liquid layouts fill whatever width is left when the browser resizes. Liquid layouts make good use of their screen space but might now always fit our needs for our layout looking generally the same on different sized browsers.Liquid layouts make good use of their screen space but might now always fit our needs for our layout looking generally the same on different sized browsers.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Frozen Layouts Frozen layouts "lock" elements into place, so they appear frozen to the page.Frozen layouts "lock" elements into place, so they appear frozen to the page. Frozen layouts allow us to keep elements from expanding as a browser window changes in size.Frozen layouts allow us to keep elements from expanding as a browser window changes in size. Let's try one …Let's try one …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science First, the XHTML side … In your index.html, add the following div, nesting everything else in the page (except for the tag): … In your index.html, add the following div, nesting everything else in the page (except for the tag): …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Now for the CSS … Add the following rule to your starbuzz.css file: #allcontent { width: 800px; padding-top: 5px; padding-bottom: 5px; background-color: #675C47; }Add the following rule to your starbuzz.css file: #allcontent { width: 800px; padding-top: 5px; padding-bottom: 5px; background-color: #675C47; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Almost there … The Frozen Layout is an improvement over the Liquid Layout, but how can we fix the large gap on the right side when the browser is very wide?The Frozen Layout is an improvement over the Liquid Layout, but how can we fix the large gap on the right side when the browser is very wide? The Jello Layout to the rescue …The Jello Layout to the rescue …

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Making Jello Add the following declarations to the #allcontent class: margin-left: auto; margin-right: auto;Add the following declarations to the #allcontent class: margin-left: auto; margin-right: auto;

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Next Time … We'll discuss another approach to layouts using absolute positioning.We'll discuss another approach to layouts using absolute positioning.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Questions?

References Freeman, Elisabeth and Eric Freeman. Head First HTML with CSS & XHTML. Sebastopol, CA: 2006.Freeman, Elisabeth and Eric Freeman. Head First HTML with CSS & XHTML. Sebastopol, CA: Neiderst-Robbins, Jennifer. Web Design in a Nutshell, Third Edition. Sebastopol, CA: 2006.Neiderst-Robbins, Jennifer. Web Design in a Nutshell, Third Edition. Sebastopol, CA: 2006.