CSS Layouts

Why use CSS for layouts.
In the past tables were used to create layouts for web pages. But this had the ill effect of bloating the code of HTML file. Tables had to be nested deep within other tables to create layouts.
With widespread browser support for CSS, there is no need to use tables for layout. Layouts created using CSS are easier to maintain, easier to code and also faster loading.

How CSS positions elements.
CSS has three positioning schemes: normal positioning, floating positioning and absolute positioning.
Normal positioning: Default positioning scheme. In this block level elements are stacked on top of each other.
Floating positioning: The block level elements are floated as far as left/ right as possible and other elements can flow around them.
Absolute positioning: The elements are removed from normal sequence of laying out and are displayed relative to some other block.

Position property.
This property sets the positioning scheme to use. Valid values are static, relative, fixed and absolute.
div.footer{position:relative;.}

Float property.
Normally CSS elements are laid out on top of each other. Using the float property you can make your CSS box move to far right or far left and allow text to wrap around it.
Valid values include,
left: Floats box to left.
right: Floats box to right.
none: Box is not floated and remains where it would if it were not given a float property.
inherit: Element takes the float value of parent element.

Clear property.
Clear property sets whether other elements can flow around. Valid values include,
left: Elements cannot wrap to left of this element.
right: Elements cannot wrap to right of this element.
both: Elements cannot wrap over on any side.

Using these properties along with width, margin and padding, any layout can be created.

Before we move on.
You might be wondering if you really need to remember all these properties and values. Well remembering them is certainly helpful, but when you are just starting you can use CSS editors which have list of all CSS properties and can be really helpful and time saving. There are many free CSS editors, but I would recommend TopStyle Lite or TopStyle Pro from www.bradburysoft.com.

Summary.
In this chapter you learnt how to create a table less layout using CSS. In the next chapter you will apply all you have learnt to tackle some real world designs.


Main Menu XHTML CSS Basics CSS Properties CSS Layouts Finally XHTML Articles CSS Articles	CSS Layouts Why use CSS for layouts. In the past tables were used to create layouts for web pages. But this had the ill effect of bloating the code of HTML file. Tables had to be nested deep within other tables to create layouts. With widespread browser support for CSS, there is no need to use tables for layout. Layouts created using CSS are easier to maintain, easier to code and also faster loading. How CSS positions elements. CSS has three positioning schemes: normal positioning, floating positioning and absolute positioning. Normal positioning: Default positioning scheme. In this block level elements are stacked on top of each other. Floating positioning: The block level elements are floated as far as left/ right as possible and other elements can flow around them. Absolute positioning: The elements are removed from normal sequence of laying out and are displayed relative to some other block. Position property. This property sets the positioning scheme to use. Valid values are static, relative, fixed and absolute. div.footer{position:relative;.} Float property. Normally CSS elements are laid out on top of each other. Using the float property you can make your CSS box move to far right or far left and allow text to wrap around it. Valid values include, left: Floats box to left. right: Floats box to right. none: Box is not floated and remains where it would if it were not given a float property. inherit: Element takes the float value of parent element. Clear property. Clear property sets whether other elements can flow around. Valid values include, left: Elements cannot wrap to left of this element. right: Elements cannot wrap to right of this element. both: Elements cannot wrap over on any side. Using these properties along with width, margin and padding, any layout can be created. Before we move on. You might be wondering if you really need to remember all these properties and values. Well remembering them is certainly helpful, but when you are just starting you can use CSS editors which have list of all CSS properties and can be really helpful and time saving. There are many free CSS editors, but I would recommend TopStyle Lite or TopStyle Pro from www.bradburysoft.com. Summary. In this chapter you learnt how to create a table less layout using CSS. In the next chapter you will apply all you have learnt to tackle some real world designs.
Copyright 2006 XHTML and CSS . All rights reserved.