logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA


dailyclick
All times in EST

Low Carb: 8:00 PM

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor