Home arrow Style Sheets arrow Page 3 - Introduction to CSS Positioning Properties Part 1

Introduction to CSS Positioning Properties Part 1

Web designers gained a great deal from the CSS2 specification, especially when it comes to increased flexibility to position HTML elements exactly where they want them within Web pages. Keep reading to learn more.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 11
February 21, 2005
  1. · Introduction to CSS Positioning Properties Part 1
  2. · Basic definitions
  3. · Inline and block boxes
  4. · CSS 2 Positioning Schemes
  5. · The "position" property
  6. · The "display" property

print this article

Introduction to CSS Positioning Properties Part 1 - Inline and block boxes
(Page 3 of 6 )

As you probably know, several types of boxes are available in HTML. However, for the scope of this article, we reference only two types of boxes: inline boxes and block boxes.

Inline boxes: Inline elements are visually rendered as elements positioned next to each other. They’re commonly used to wrap small chunks of content given that a specific style is applied. The most common tag to be used for inline positioning is the <span> element, since it gives structure and context to any inline content in a Web document. For example:

While <span class="bolded">this text is highlighted</span>, the rest is normal.

Only using the <span> styled element, we’ve highlighted a chunk of text, within a sentence. The visual output for this example is the following:

As we can see, the highlighted text is visually rendered next to the normal text, behaving as an "inline element." There are other common HTML elements that default to behaving as "inline," such as <img> or <a>. However, these default behaviors may be changed using the CSS "display" property, as we’ll shortly see.

Let’s define the concept of block boxes.

Block boxes: Block elements are the type of boxes generated by elements such as <div>, <p>, or headers <h1>…<h6>. When they’re displayed in documents, the next element within the document structure will be positioned below of it, and not next to it. A clear example would be:

<h3>This is a block box</h3>

<h4>This is block box</h4>

<div>This is a block box</div>

The visual output would be as follows:

Inline and block boxes are simple but key concepts to start defining the layout and position of page elements, since they’re pretty easy to grasp. Once we’ve roughly described inline and block elements, we need to be able to position each element in our Web documents. CSS2 provides plenty of room for doing that. So, let’s dive into the CSS2 position schemes, in order to find out more about them.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials