Tableless layout

April 12, 2007 at 4:06 am 1 comment

Introduction

HTML is a structural language, which means it is – or should be – used to add structure into a text through tags. The table tag should then only be used to format data into a table to relate columns with rows.

But since the apparition of tables in HTML, it has been very often used for layout purpose, usually split a web page into columns. Besides the fact that it breaks the meaning of HTML, it doesn’t help either in various cases that we could summarize by the difficulty to parse or render a table in some context (disabilities, view port restrictions, …).

This document describes one way to create a 3 columns layout and links to other layout techniques.

Layout description

The technique described below is the one used in the page for new W3C users and allows to build a 3 columns layout, with the following features:

  • the text in the center of the page is the one that comes first in the code, which means that’s the first to be read in non-CSS or non-visual browsers
  • the left column and the right one follow in this order

It’s ideal for homepages since it allows to have a complete text in the center and nice lists of links on the side.

One of the restriction is that it won’t work for too bad CSS implementations, but it will degrade nicely into a traditional vertical layout.

This layout is applied to this page itself so that you can get an idea of what it produces.

Implementation

on the left, a HTML division with list1 as id, in the center, a HTML division with main as id and on the right, a HTML division with list2 as idThis layout uses CSS absolute positionning. If we define 3 divisions on the HTML page <div id="main">, <div id="list1" class="link-list">, <div id="list2" class="link-list">, we can apply then the following CSS rules on them:

/* Properties that both side lists have in common */
div.link-list {
        width:10.2em;
        position:absolute;
        top:0;
        font-size:80%;
        padding-left:1%;
        padding-right:1%;
        margin-left:0;
        margin-right:0;
}
/* we leave some place on the side using the margin-* properties */
#main {
        margin-left:10.2em;
        margin-right:10.2em;
        padding-left:1em;
        padding-right:1em;
}
/* and then we put each list on its place */
#list1 {
        left:0;
}
#list2 {
        right:0;
}

The idea is to crop the main division on the sides using the margin-left and margin-right properties, and then to position each side columns using position:absolute, and set the top left corner and top right corner coordinate to (0,0).

To prevent bad CSS implementations to read the stylesheet, just call it through <style type="text/css">@import url('your-stylesheet-url');</style>.

Source: http://www.w3.org/2002/03/csslayout-howto

Entry filed under: css. Tags: .

How to style quotations in CSS MySQL Connect

1 Comment Add your own

  • 1. how to attract beautiful women  |  June 4, 2013 at 8:51 am

    Every man whether single, married, has a how to attract beautiful women.
    But not in a position to meet girls. Hold eye how to
    attract beautiful women contact for a second date,
    you need to do what you should avoid coming off conceited.
    Confidence in one s self!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Flickr Photos

The firsts lights

Lago di Braies

Survivor Mode

More Photos

Blog Stats

  • 705,777 hits

%d bloggers like this: