Page layout with CSS is easy. If you are used to laying out a page with tables, it may at first appear difficult, but it isn't, it's just different and actually makes much more sense.
What is Positioning :
The position property is used to define whether an element is absolute, relative, static or fixed. The value static : is the default value for elements and renders the position in the normal order of things, as they appear in the HTML.
relative : is much like static, but the element can be offset from its original position with the properties top, right, bottom and left.
absolute : pulls an element out of the normal flow of the HTML and delivers it to a world all of its own. The absolute element can be placed anywhere on the page using top, right, bottom and left.
fixed : behaves like absolute, but it will absolutely position an element in reference to the browser window as opposed to the web page, fixed elements should stay exactly where they are on the screen even when the page is scrolled.
Floating :
Floating an element will shift it to the right or left of a line, with surrounding content flowing around it. Floating is normally used to position smaller elements within a page, but it can also be used with bigger chunks. For example
<div style="float:left; width:200px;">
<p>
This is paragraph inside first div.
</p>
</div>
<div style="float:right; width:300px;">
<p>
This is paragraph inside second div.
</p>
</div>
This will float the first div to the left side of web page, and float the second div to the right side of web page.
No comments:
Post a Comment