CSS Positioning 101

If you’re a front end developer or a designer who likes to code, CSS-based layouts are at the very core of your work. In what might be a refresher for some, or even an “a-ha!” for others, let’s look at the CSS position property to see how we can use it to create standards-compliant, table-free CSS layouts…

How Well Do You Understand CSS Positioning?

When people are new to CSS layouts there’s a tendency to gravitate toward positioning. Positioning seems like an easy concept to grasp. On the surface you specify exactly where you want a block to be located and there it sits. Positioning is a little more complicated than it first appears though. There are a few things that can trip up a newbie and a few things to understand before positioning becomes second nature…

Absolute, Relative, Fixed Positioning: How Do They Differ?

An important concept to understand first is that every single element on a web page is a block. Literally a rectangle of pixels. This is easy to understand when when you set the element to display: block; or if that element is by default display: block; This means you can set a width and a height and that element will respect that. But elements that are display: inline, like a span by default, are also rectangles, they just flow onto the page different, lining up horizontally as they can.

Now that you are picturing every single page element as a block of pixels, we can talk about how positioning is used to get the blocks of pixels exactly where you want them to go. We’re going to leave off any discussion of the box model, but that factors into this as well…

CSS Absolute Positioning: Create a Fancy Link Block

Absolute position is a feature of the CSS2 specification that is supported by all of web browsers. If you posit an element an image, a table, or whatever absolutely on your page, it will appear at the exact pixel you specify. In this tutorial, we will use some tricks to create a fancy link block that make our links more attractive…

The Mystery Of The CSS Float Property

In this article, we’ll discuss exactly what the float property is and how it affects elements in particular contexts. We’ll also take a look at some of the differences that can occur in connection with this property in the most commonly-used browsers. Finally, we’ll showcase a few practical uses for the CSS float property. This should provide a well-rounded and thorough discussion of this property and its impact on CSS development…

Aligning Images The Right Way Using CSS

Images are great for blog posts and chunks of text in general. Even if they’re just remotely relevant, they’ll add some space and make the content more accessible. You want to spice your texts up with images.You can position images however you like, of course, but a nice feature is to have the floating to the left or right, with the text flowing around them.