More Cascading Style Sheets Part 5 Pages 300

More Cascading Style Sheets Part 5 Pages 300 -303

Float Layout Basics �Float-based layouts take advantage of the float property to position elements side by side and create columns on a web page �The float property moves a page element to one side of the page (or containing block) �Any HTML below the floated element moves up on the page and wraps around the float �float property accepts values: left – right – none – inherit �Vertical margins will not be collapsed above or below it like block boxes in normal flow can be �The floated box will be aligned with the top of the containing box 8 -32

Clearing and Containing Floats �Sometimes you don’t want content to move up and next to a floated Column (copyright) �In a 2 or 3 column design if the main column is shorter than either of the floated sidebars a footer can move up and around the left floated column �If you float one or more elements inside a nonfloated containing tag and the floated element is taller than the other content inside the tag it will stick out the bottom of the enclosing tag

Clearing and Containing Floats �Use the clear property �This property can be used on any element �Has four possible values �left – The content of the element with the clear property is cleared from the left side of a float �right - The content of the element with the clear property is cleared from the right side of a float �both - The content of the element with the clear property is cleared from either side of a float �none – Allows floating on either side 8 -33

Float Layout Basics �Two column layout 1. Wrap each column in a <div> tag with an ID or Class attribute 2. Float the sidebar <div> either right or left �The source order (order of HTML code) is important �HTML for floated element MUST appear before the HTML for the element that wraps around it 3. Set a width for floated window �Width should be fixed using pixels or em’s �Percentage can be used with caution 4. Add left margin to main content �Keeps content from wrapping under the floated window �Should be just a little larger than width of sidebar

Applying Floats to Your Layouts �Expanding it into a three column layout �Add another <div> between the two columns and float to the right �Add a right margin to the middle column