css layouts without tables

8/10/2019 CSS Layouts Without Tables

1/9

CSS Layouts Without Tables By Jon Jackson

Tweet

Cascading Style Sheets (CSS) are the most flexible way to create attractive, standards-compliant websites. Even so,

many web designers choose to stick to the original HTML elements that they are familiar with in order to implementtheir designs. For example, HTML tables are often used in order to create the seemingly complex layouts on some

web pages.

This article will simply address the drawbacks of relying too heavily on tables for layout as well as the benefits of

Cascading Style Sheets. It will also demonstrate how to implement a couple of page layouts using HTML and

Cascading Style Sheets as an alternative to HTML tables.

A Shift Towards Semantic Mark-up

If we look to the World Wide Web Consortium (W3C) for guidelines on how to use HTML properly, the use of

semantic mark-up is always strongly recommended. This means that code should be meaningful as well as

syntactically correct.

Well formed semantic mark-up offers greater accessibility to users on various platforms (such as mobile devices) and

allows for greater flexibility, scalability and performance of your Website and its pages. This is one of the main driving

forces behind XHTML.

An example of poor semantic mark-up would be using the following code to represent a sub-heading on an HTML

page:

Heading

Syntactically this is correct. Semantically though, it is a little off the mark. This code represents a paragraph which is

in bold type; not a heading. To represent a heading or sub-heading in HTML we can use the heading tags (,

, etc...) to surround the heading text.

Relating this idea to HTML tables would mean that tables should only be used for tabular data and not for layouts andpositioning. But how can we create a decent page layout without tables? Surely everything will just appear in a single

boring column if we don't use tables...

Cascading Style Sheets (CSS) to the Rescue!

In the introduction to this article we said that Cascading Style Sheets enable us to create attractive websites. A quick

glance at http://www.cssremix.com certainly gives some weight to this argument. Now let's look at how we can

actually implement some different page layouts.

For these examples we are going to use XHTML 1.0 Strict along with an embedded CSS style block. In practice this

CSS can be included in a separate .css file (for details on how to do this please refer to this page ). The full XHTML

and CSS code for each layout can be copied into a single text file and named with the .html extension.It doesn't matter whether you use HTML or XHTML as your document type, as long as your mark-up is nice and

clean. Validating your code using the W3C validation tools is always a good idea.

3 Column Layout With Header and Footer

The 3 column layout is common these days. The following HTML and CSS enables you to create a flexible 3 column

layout with the minimum of fuss. You can see this page layout here .
http://www.htmlgoodies.com/feedback.php/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htmhttp://www.htmlgoodies.com/feedback.php/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htmhttp://www.htmlgoodies.com/feedback.php/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htmhttp://twitter.com/sharehttp://twitter.com/sharehttp://www.w3c.org/http://www.w3c.org/http://www.w3c.org/http://www.cssremix.com/http://www.cssremix.com/http://www.cssremix.com/http://www.acuras.co.uk/articles/index.php?id=5http://www.acuras.co.uk/articles/index.php?id=5http://www.acuras.co.uk/articles/index.php?id=5http://www.htmlgoodies.com/img/3_column.htmlhttp://www.htmlgoodies.com/img/3_column.htmlhttp://www.htmlgoodies.com/img/3_column.htmlhttp://www.htmlgoodies.com/img/3_column.htmlhttp://www.acuras.co.uk/articles/index.php?id=5http://www.cssremix.com/http://www.w3c.org/http://twitter.com/sharehttp://www.htmlgoodies.com/feedback.php/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm


2/9

We'll start off with the straightforward HTML:

Header

These set of divisions give us the fundamental page structure to work from. The divisions have all been given IDs

which enable the CSS to refer to each division and style them appropriately. It is worth noting that element IDs must

always be unique within a page.

Now let's have a look at the CSS:

body {

font-family:arial,helvetica,sans-serif;

font-size:12px;

}

These first couple of lines in the style sheet specify the font family and size for the document.

#wrapper {

width:900px;

margin:0px auto;

border:1px solid #bbb;

padding:10px;

}

Here, the page width has been specified as 900 pixels. This wrapper division also has padding of 10 pixels and a

border of 1 pixel. The total of these values results in the actual width of the page being 922 pixels.

#header {


height:80px;

padding:10px;}

#content {

margin-top:10px;

padding-bottom:10px;

}

#content div {

padding:10px;


3/9


float:left;

}

#content-left {

width:180px;

}#content-main {

margin-left:10px;

width:500px;

}

#content-right {

margin-left:10px;

width:134px;

}

#footer {

float:left;

margin-top:10px;

margin-bottom:10px;

padding:10px;


width:878px;

}

#bottom {

clear:both;

text-align:right;

}

CSS Layouts Without Tables By Jon Jackson

Complex Home Page Layout

There comes a time when a more complex page layout is required. Website home pages are a good example of this.The home page of a website often differs in layout from the rest of the site.The following HTML and CSS is used to create one example of a home page layout. You can see this pagelayout here . Unlike the 3 column example above, this page layout is a pretty static. The 3 column layout was flexiblein the sense that it could expand vertically with varying amounts of content within its divisions.This home page layout is more rigid and has all its divisions, widths and heights coded into the CSS. This is perfectlyacceptable for a page that will only appear once on a website (i.e. as its home page). There is some tricky mathinvolved with this layout as well. You have to be careful in adding all the margins, borders and padding widths thatoccur across the page in order to gain perfect alignment.So let's start off with the HTML again:

Header

Box 1

Box 2

Box 3
http://www.htmlgoodies.com/feedback.php/beyond/css/article.php/11160_3642151_2/CSS-Layouts-Without-Tables.htmhttp://www.htmlgoodies.com/feedback.php/beyond/css/article.php/11160_3642151_2/CSS-Layouts-Without-Tables.htmhttp://www.htmlgoodies.com/feedback.php/beyond/css/article.php/11160_3642151_2/CSS-Layouts-Without-Tables.htmhttp://www.htmlgoodies.com/img/complex_home_page.htmlhttp://www.htmlgoodies.com/img/complex_home_page.htmlhttp://www.htmlgoodies.com/img/complex_home_page.htmlhttp://www.htmlgoodies.com/img/complex_home_page.htmlhttp://www.htmlgoodies.com/feedback.php/beyond/css/article.php/11160_3642151_2/CSS-Layouts-Without-Tables.htm


4/9


5/9

margin-left:444px;width:200px;

}#content-box3 {

margin-left:676px;width:202px;

}#footer {

float:left;margin-top:10px;margin-bottom:10px;padding:10px;border:1px solid #bbb;width:878px;

}#bottom {

clear:both;text-align:right;

}If you don't understand all of the above code straight away, don't worry. You can easily save your own version of this

code and start fiddling around with it to see what's what. Experimentation in this manner is one of the best ways tolearn.

Conclusion

Using CSS and "semantic" HTML is the only way forward when it comes to professional web page design. Eventhough dragging yourself away from table-based layouts may be tough to do, there are many benefits to be had.Hopefully the two page layout examples within this article will give you something to play with and enable you toimprove your CSS skills if you are still a beginner. Even if you find CSS and semantic HTML somewhat tiresomeinitially, I encourage you to persevere and you will gain some rewarding results.There are plenty of sites out there (especially this one) that can help you learn more about CSS and semantic HTML,so stick with it and learn how you can make the Web a better place!

Positioning

The position property is used to define whether a box is absolute, relative, static or fixed: static is the default value and renders a box in the normal order of things, as they appear in the

HTML. relative is much like static but the box can be offset from its original position with the

properties top , right ,bottom and left . absolute pulls a box out of the normal flow of the HTML and delivers it to a world all of its own. In

this crazy little world, the absolute box can be placed anywhere on the pageusing top , right , bottom and left .

fixed behaves like absolute , but it will absolutely position a box in reference to the browserwindow as opposed to the web page, so fixed boxes should stay exactly where they are on thescreen even when the page is scrolled.

When we talk of absolutely positioned boxes being placed anywhere on the page, theyreactually still relatively positioned from the edges of the page. And to add another

backtrack, the page doesnt actually have to be the container - a box will be absolutely
http://www.htmldog.com/reference/cssproperties/position/http://www.htmldog.com/reference/cssproperties/position/http://www.htmldog.com/reference/cssproperties/position/http://www.htmldog.com/reference/cssproperties/position/


6/9

positioned in relation to any non-static positioned containing box. Just ignore that for now,though

Layout using absolute positioning

You can create a traditional two-column layout with absolute positioning if you have somethinglike the following HTML:

This

That

The Other

Ra ra banjo banjo

Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo.

Ra ra banjo banjo.

(Ra ra banjo banjo)

Were being old -skool and using div elements so as not to introduce too many new things,

but Sectioning is sexier.

And if you apply the following CSS:

#navigation {

position : absolute ;

top : 0 ;

left : 0 ;

width : 200px ;

}

#content {

margin-left : 200px ;

}

You will see that this will set the navigation bar to the left and set the width to 200 pixels.Because the navigation is absolutely positioned, it has nothing to do with the flow of the rest of
http://www.htmldog.com/reference/htmltags/div/http://www.htmldog.com/reference/htmltags/div/http://www.htmldog.com/reference/htmltags/div/http://www.htmldog.com/guides/html/intermediate/sectioning/http://www.htmldog.com/guides/html/intermediate/sectioning/http://www.htmldog.com/guides/html/intermediate/sectioning/http://www.htmldog.com/guides/html/intermediate/sectioning/http://www.htmldog.com/reference/htmltags/div/


7/9

the page so all that is needed is to set the left margin of the content area to be equal to thewidth of the navigation bar.

How stupidly easy! And you arent limited to this two -column approach. With cleverpositioning, you can arrange as many blocks as you like. If you wanted to add a third column,

for example, yo u could add a navigation2 chunk to the HTML and change the CSS to:

#navigation {


top : 0 ;

left : 0 ;

width : 200px ;

}

#navigation2 {


top : 0 ;

right : 0 ;

width : 200px ;

}

#content {

margin : 0 200px ; /* setting top and bottom margin to 0 and right and left margin

to 200px */

}

The only downside to absolutely positioned boxes is that because they live in a world of theirown, there is no way of accurately determining where they end. If you were to use theexamples above and all of your pages had small navigation bars and large content areas, youwould be okay, but, especially when using relative values for widths and sizes, you often haveto abandon any hope of placing anything, such as a footer, below these boxes. If you wantedto do such a thing, one way would be to float your chunks, rather than absolutely positioningthem.

Floating Floating a box will shift it to the right or left of a line, with surrounding content flowing around it.

Floating is normally used to shift around smaller chunks within a page, such as pushing anavigation link to the right of a container, but it can also be used with bigger chunks, such asnavigation columns.


8/9

Using float , you can float: left or float: right .

Working with the same HTML, you could apply the following CSS:

#navigation { float : left ;

width : 200px ;

}

#navigation2 {

float : right ;

width : 200px ;

}

#content {

margin : 0 200px ;

}

Then, if you do not want the next box to wrap around the floating objects, you can applythe clear property:

clear: left will clear left floated boxes clear: right will clear right floated boxes clear: both will clear both left and right floated boxes.

So if, for example, you wanted a footer in your page, you could add a chunk of HTML

Footer! Hoorah!

and then add the following CSS:

#footer {

clear : both ; }

And there you have it. A footer that will appear underneath all columns, regardless of thelength of any of them.

This has been a general introduction to positioning and floating, with emphasis on thelarger chunks of a page, but remember, these methods can be applied to any box within
http://www.htmldog.com/reference/cssproperties/float/http://www.htmldog.com/reference/cssproperties/float/http://www.htmldog.com/reference/cssproperties/float/http://www.htmldog.com/reference/cssproperties/clear/http://www.htmldog.com/reference/cssproperties/clear/http://www.htmldog.com/reference/cssproperties/clear/http://www.htmldog.com/reference/cssproperties/clear/http://www.htmldog.com/reference/cssproperties/float/


9/9

those boxes, too. With a combination of positioning, floating, margins, padding and borders, you should be able to represent any web design your mischievous littleimagination can conjure. The best way to learn? Tinker! Play! Go!

css layouts without tables

Documents