Home
Search
Contact
Tips
Layouts
001.php
002.php
003.php
004.php
005.php
006.php
007.php
008.php
009.php
3_col_with_nav
centre_box_columns.php
centre_box_columns_bg.php
centre_box_three_columns_01.php
centre_box_three_columns_02.php
centre_box_three_columns_03.php
centre_box_two_columns.php
css_pattern_matching.php
css_pattern_matching_01.php
css_pattern_matching_02.php
css_pattern_matching_03.php
css_pattern_matching_04.php
css_three_columns_001.php
float_001.php
float_002.php
html_table_height_example_001.php
html_table_height_example_002.php
html_table_height_example_003.php
menu_html_table.php
menu_tc.php

In CSS, no tables.

Take one div/layer and centre it. Then have a left hand column and a right hand column. Nice.

A problem is that the left/right columns won't produce the coloured navigation effect if longer than the height of the window. However this can be faked using a background image on the containing layer

This is the right column.

DIV.centrebox {
position:absolute;
left:50%;
top: 0px;
width: 500px;
height: 100%;
margin-left: -250px;
background-color: #336699;
}

DIV.leftcol {
position: absolute;
top: 0px;
width: 100px;
height: 100%;
background-color: #cccccc;
}

DIV.rightcol {
position: absolute;
top: 0px;
left: 100px;
width: 400px;
background-color: #0099ff;
}
</style>

<div class="centrebox">
    <div class="leftcol">
    This is the left column.
    </div>
    <div class="rightcol">
    This is the right column.
    </div>
</div>