|
| CSS Positioning and Layout  | CSS gives you very precise control over the position of elements on your Web pages. You can control the size of the elements and where they are in the flow of the document, or give them specific coordinates and placement within the page layout. | | Define Element Dimensions
Before you can place an element in your Web page design or create a layout, you need to define the dimensions of the element. By default, a Web page has a width of 100%, and the elements within that page will start out at that size as well, unless a more specific dimension is applied to them. In other words, if you have a paragraph on your page, it will take up 100% of the browser width, even if there is only 1 word in it. The box that makes up the paragraph will be 100% wide. See the CSS box model documention for more information. Possible dimensions include:
|
| Display and Visibility
Once you know the dimensions of your elements, you can define how they display on the page. The CSS display property defines what type of element it is. You can turn paragraphs into lists and block-level elements into inline elements. The visibility property is a bit more specialized. It defines only whether an element can be seen in the layout or not. Note that an element that is hidden with the visibility property will still take up space, the contents just don't show on the page.
| Methods of Positioning Elements
To position elements, first determine how you're going to position your elements using the CSS position property or floating elements with the float property. - normal flow positions elements as they appear in the HTML.
- absolute position places the element in a precise location on the page, with 0,0 the upper left corner of the browser window
- relative position places the elements in normal flow, with positioning starting from that position
- floating takes elements out of normal flow and pushes them to the right or left sides of the document
| Absolute and Relative Positioning
Use the position element: position: absolute; Absolute positioned elements are given positions relative to the upper left corner of the browser window. So if you position an element left: 10px and down: 10px, it will always display there, no matter what else is in the document. Relative positioned elements are first placed in the flow of the document, then the positions are applied. So if you put a relative positioned item left: 10px and down: 10px, it will display slightly lower and to the left of where it would normally display.
| Floating Elements
When you float an element, it takes it out of the normal flow, and pushes it to the right or left of the parent element. Once an element is floated, other elements in the normal flow will flow around the floated element like a river flowing around a rock. float: left; If you want to turn off the float, you can use the clear property to clear either the specific float direction or both floats at once. clear: left;
| How to Use Float For Layout
The trick to floating layouts is to draw your layout and then float everything. Define the widths on all your elements, even if it's relative widths (percentages) so that you have a good idea where things will end up. For example, if you have a container element that is 800px wide, if you float a 200px (0 margin, padding, and border) element to the left, you will have 600px worth of space to play with. If you then float a 550px width (0 margin, padding, and border) element to the right, the two elements will display side-by-side with a 50px gutter between them.
| Stacking Elements with Z-index Layers
When you position elements, they can end up overlapping other elements. Using the z-index property you can define which elements are on top or below. Every element starts with a z-index of 0. The higher the z-index (up to 100) the more likely it will be on top. The lower the z-index (down to -100) the more likely it will be on the bottom. z-index: 90; z-index
| Sample CSS Layouts
CSS is capable of handling most layout possibilities, here are some of the more popular layouts:
| |
| | | | Missing a lesson? Click here.
About U. is our collection of free online courses designed to help you learn a new skill, solve a problem, get something done, or just learn more about your world. Sign up now, and we will email you lessons on a daily or weekly basis. | | | | You are receiving this email because you subscribed to the About.com 'Cascading Style Sheets' email. If you wish to unsubscribe, please click here.
About respects your privacy: Our Privacy Policy
Contact Information:
249 West 17th Street
New York, NY, 10011
© 2010 About.com | | | | | |
Advertisement
 | |
