g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Folklore and Mythology
Women's Fashion
Holiday/Seasonal Cooking
Hiking & Backpacking
New Age
Weight Loss

All times in EST

Full Schedule
g HTML Site

BellaOnline's HTML Editor


Using CSS to Place HTML Elements

Guest Author - Elizabeth Connick

CSS rules give you the ability to place HTML elements exactly where you want them. You can adjust how they respond to other elements sitting around them, or even hide them entirely. Here's a breakdown on the CSS placement properties.

Display: This property defines how an element is displayed. Setting display to "none" hides the element completely, while other values can change how an element reacts to other properties and elements. For example, divs are set to display as "block" by default, meaning it acts as a rectangular object, but you can use "display: inline" to force a div to act like a paragraph instead. Or, you can do the opposite and use "display: block" to force a paragraph to act like a div.

Position: Defines how an element reacts to the elements around it. Elements use "position: static" by default, meaning they display in order as they appear in the HTML code. "Position: relative" means that the element's static location is calculated, and then offset by whatever you indicate in the "top" and "left" properties. The other page elements act as though the relative element was still in its static location. "Position: absolute" elements ignore their static location, basing their position solely on the values in the top, left, right and bottom properties. In addition, other elements will ignore that element (so if you're not careful you can end up with some messy overlaps). "Position: fixed" is similar to "position: absolute" except that the element will hold its place even if your visitor scrolls the page.

Visibility: Decides if an element shows on the page or not. The difference between "display: none" and "visibility: hidden" is that in the former case, the other page elements behave as if the invisible object does not exist; in the latter, other elements will hold a place for the hidden element. Obviously, the default setting is "visible."

Float: Sets whether an element cascades to the left or right of other elements (or doesn't cascade at all, which is the default). This property is extremely helpful in getting relative elements positioned correctly. You must set a width for any floating element or it won't display correctly. Also, if you use float for one element you'll probably want to set the property for all the elements around it as well.

Clear: This property works in conjunction with the "float" property. It decides how the element will let other elements float around it "clear: left" means that no other elements can float to its left; "clear: right" blocks off the right side and "clear: both" means no elements can float to either side. Default setting is "clear: none" (meaning other elements can float to either side).
This site needs an editor - click to learn more!

Add Using+CSS+to+Place+HTML+Elements to Twitter Add Using+CSS+to+Place+HTML+Elements to Facebook Add Using+CSS+to+Place+HTML+Elements to MySpace Add Using+CSS+to+Place+HTML+Elements to Del.icio.us Digg Using+CSS+to+Place+HTML+Elements Add Using+CSS+to+Place+HTML+Elements to Yahoo My Web Add Using+CSS+to+Place+HTML+Elements to Google Bookmarks Add Using+CSS+to+Place+HTML+Elements to Stumbleupon Add Using+CSS+to+Place+HTML+Elements to Reddit

RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the HTML Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2015 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor