3 column CSS

**miroslavgojic** · 12-23-2006, 05:55 AM

1) CODE TITLE: CSS THREE COLUMN TEMPLATE

2) AUTHOR NAME/NOTES: MIROSLAV GOJIC

3) DESCRIPTION: Three column CSS template with auto high *vertical stretch*

4) URL TO CODE: http://www.miroslavgojic.rs.ba

or, ATTACHED BELOW (see #3 in guidelines below):

Code:

<style type="text/css">

body {
	margin-left: auto; 
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	width: 790px;
}

#contaniner {
	background: #66CCFF;
	width: 790px;
	margin-left: auto;
	margin-right: auto;
	position: relative;

}

#headerBlock {
	width: 790;
	background: #0000FF;
	height: 125px;
}

#navbar {
	width: 790px;
	height: 25px;
}

#content {
	height: auto;
}

#leftBlock {
	width: 175px;
	height: auto;
	background-color: #ffff00;
	float: left;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
}

#rightBlock {
	width: 175px;
	height: auto;
	background-color: #ffff00;
	float: right;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
}

#mainBlock {
	width: 440px;
	height: auto;
	background-color: #ffff00;
	float: left;
	padding-top: 5px;
	padding-bottom: 5px;
	text-align: center;
}

#footerBlock {
	height: 40px;
	background: #9966FF;
	clear: both;
}

.glossymenu{
list-style-type: none;
margin: 5px 0;
padding: 0;
width: 165px;
border: 0px solid #9A9A9A;
border-bottom-width: 0;
text-align: left;
}

.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;

}


*html .glossymenu li a{ /*IE only. Actual menu width minus left padding of A element (10px) */
width: 160px;
}

.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}

.glossymenu li a:hover{
background-image: url(glossyback2.gif);
}

</style>
<div id="contaniner">
	<div id="headerBlock">headerBlock
	</div>
	<div id="navbar">navbar
	</div>
	<div id="content">
		<div id="leftBlock">
		<ul class="glossymenu">
<li><a href="http://www.dynamicdrive.com/" >dynamicdrive</a></li>
<li><a href="http://www.dynamicdrive.com/style/" >dynamicdrive</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">javascriptkit</a></li>
<li><a href="http://www.javascriptkit.com/domref/">javascriptkit</a></li>
<li><a href="http://www.cssdrive.com">cssdrive</a></li>
<li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">codingforums</a></li>		
</ul>
		</div>
		<div id="rightBlock">rightBlock
		</div>
		<div id="mainBlock">mainBlock
		</div>
	</div>
	<div id="footerBlock">footerBlock
	</div>
</div>

**mwinter** · 12-24-2006, 04:32 AM

It could be far more clear, and follow best practices. Making it valid, too, would be nice.

To communicate the idea, one only needs to present something like:

Code:

.skip-to {
    pause: 100%;
    position: absolute;
    left: -100em;
}
.left {
    float: left;
    width: 10em;
}
.right {
    float: right;
    width: 10em;
}
.centre {
    /* Make left and right margins slightly wider than their respective columns. */
    margin: 0 11em;
}
.footer {
    clear: both;
}

HTML Code:

<body>
    <div class="header">
        Header
        <a class="skip-to" href="#content">Skip navigation to content</a>
    </div>
    <div class="left">
        Left-most column
    </div>
    <div class="right">
        Right-most column
    </div>
    <div id="content" class="centre">
        Central column
    </div>
    <div class="footer">
        Footer
    </div>
</body>

with a note that the class names are for expository purposes only, and better, presentation-neutral replacements should be used instead. Everything else is superfluous and distracts the reader from the significant parts.

If the content in either flanking column is significant, links to those containing elements should be included, such as the one already present above. The idea is to skip navigation and other distracting content for the benefit of assistive technologies. With more than one link, a list should be used and that should be assigned the "skip-to" class name.

If a footer isn't required, absolute positioning can be a better implementation technique as it places the important content nearer to the start of the document. For that reason, if this is added to the CSS Library, the title should advertise the footer as a distinguishing characteristic.

Mike

Thread: 3 column CSS

Thread Tools

Search Thread

3 column CSS

Bookmarks

Bookmarks

Posting Permissions