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. Article Continues Below CSS positioning is often misunderstood. Sometimes, in a bug-fixing fury, we apply different position values to a given selector until we get one that works. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Get with the flow#section1 First, let’s take a step back to recognize the world we’re working in. Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Think of a “box,” as described by the spec as a wooden block—not unlike the ones you played with as a young whippersnapper. Static and relative—nothing new here#section2 In action#section6
The Mystery Of The CSS Float Property Advertisement Years ago, when developers first started to make the transition to HTML layouts without tables, one CSS property that suddenly took on a very important role was the float property. The reason that the float property became so common was that, by default, block-level elements will not line up beside one another in a column-based format. The CSS float property allows a developer to incorporate table-like columns in an HTML layout without the use of tables. In this article, we’ll discuss exactly what the float property is and how it affects elements in particular contexts. Definition and Syntax The purpose of the CSS float property is, generally speaking, to push a block-level element to the left or right, taking it out of the flow in relation to other block elements. Flickr photo by presentday The effectiveness of using floats in multi-columned layouts was explained by Douglas Bowman in 2004 in his classic presentation No More Tables: No More Tables Syntax Float in Practice
Understanding CSS Floats Using css floats effectively can be confusing and it’s probably one of the things that trips up most people when they’re first learning css. However once you learn to control floated elements it opens up a whole new world of possibilities in your design and makes developing layouts much simpler. And best of all floats really aren’t that hard to work with once you understand a few key points. What is a Float? A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property).— w3.org The float property has 3 values; none, which is the default, left, and right. Floats sit as far left or as far right as possible within the immediate containing div. The Difference Between Floats and Positioning In css there are 3 types of positioning schemes. How to Effectively Use Floats There are two main ways floats are used.
Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.
2 Column CSS Layout: Fixed Width And Centered One of the more common css layout patterns you’ll come across is the fixed width 2 column layout. It’s relatively easy to code and understand, though it sometimes trips up developers new to css layouts. A few weeks ago I promised to offer boilerplate code for some common css layout patterns. This is the first of that boilerplate code and I’ll continue to offer more in the coming weeks. If you prefer to skip the explanation and get right to the code you can view the source of the demo. The HTML The html for this layout is rather simple as you can see below. We have a single div for each of the 4 main areas of the layout — header, content, sidebar, and footer. One thing to note is the structure of the html above follows the structure of the page itself. Later in this post I’ll offer two ways to change the layout above so the sidebar is to the left of the content. The CSS If you’ve already viewed the source code of the demo you’ll note the css like the html is rather simple. Floated Elements
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. Article Continues Below CSS positioning is often misunderstood. Sometimes, in a bug-fixing fury, we apply different position values to a given selector until we get one that works. The CSS specification offers us five position properties: static, relative, absolute, fixed, and inherit. Get with the flow#section1 First, let’s take a step back to recognize the world we’re working in. Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Think of a “box,” as described by the spec as a wooden block—not unlike the ones you played with as a young whippersnapper. Static and relative—nothing new here#section2 In action#section6
Fix Your Site With the Right DOCTYPE! You’ve done all the right stuff, but your site doesn’t look or work as it should in the latest browsers. Article Continues Below You’ve written valid XHTML and CSS. You’ve used the W3C standard Document Object Model (DOM) to manipulate dynamic page elements. This little article will provide you with DOCTYPEs that work, and explain the practical, real–world effect of these seemingly abstract tags. WHY A DOCTYPE? Per HTML and XHTML standards, a DOCTYPE (short for “document type declaration”) informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. As mentioned in previous ALA articles (and in other interesting places), DOCTYPES are also essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win. Clearly, this is not what you want. WHERE HAVE ALL THE DOCTYPES GONE? W3.org is not A List Apart, WebReference, or Webmonkey. The DOCTYPE you’d actually want to use is:
Branding, Identity & Logo Design Explained A logo is not your brand, nor is it your identity. Logo design, identity design and branding all have different roles, that together, form a perceived image for a business or product. There has been some recent discussion on the web about this topic, about your logo not being your brand. What is brand? To explain this in more detail, let’s start at the top – the brand. What is branding? Branding is certainly not a light topic – whole publications & hundreds of books have been written on the topic, however to put it in a nutshell you could describe a ‘brand’ as an organisation, service or product with a ‘personality’ that is shaped by the perceptions of the audience. Many people believe a brand only consists of a few elements – some colours, some fonts, a logo, a slogan and maybe some music added in too. It is the consistency of this core idea that makes up the company, driving it, showing what it stands for, what it believes in and why they exist. What is identity design? What is a logo?
Equal Height Columns with Cross-Browser CSS and No Hacks by Matthew James Taylor on 17 October 2008 Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites. For those who want some action immediately check out my demo pages: 2 column, 3 column, 4 column and 5 column. The problem with equal height columns In the example above we have three columns each with a different amount of content. Separating the column content from it's background colour The first step to solving the equal height problem is to break it into smaller pieces that can be solved separately. A floated container div will always be the height of it's floated contents This is the central principle behind this equal column height method. Three column HTML div structure
What is Vertical Align? CSS has a property called vertical align. It can be a bit confusing when you first learn about it, so I thought we could go through it's use a little bit. The basic usage is like this: Notice in this usage case, it is being applied to the img element. The valid values are: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, or a value in percentage. The confusion, in my opinion, sets in when people try to use vertical-align on block level elements and get no results. Baseline The default value of vertical-align (if you declare nothing), is baseline. Middle Perhaps the most common use for vertical-align is setting it to 'middle' on icon-size images. The browser does the best job it can centering the pixel height of the text with the pixel height of the image: Be aware that if the image is larger than the current font-size and line-height, it will push the following lines down if need be: Text-bottom Text-top Top & Bottom Sub & Super Vertical Align on Table Cells Share On
The Perfect 3 Column Liquid Layout: No CSS hacks. SEO friendly. iPhone compatible. Download this layout (25kb zip file). Percentage dimensions of the holy grail layout All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content. Maximum column content widths To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. 800 x 600 Left & right columns: 162 pixels Center page: 357 pixels 1024 x 768 Left & right columns: 210 pixels Center page: 459 pixels The nested div structure I've colour coded each div so it's easy to see: The header, colmask and footer divs are 100% wide and stacked vertically one after the other. No CSS hacks The CSS used for this layout is 100% valid and hack free. SEO friendly 2-1-3 column ordering Full length column background colours In this layout the background colours of each column will always stretch to the length of the longest column.