Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

An easy to use 2-column CSS layout 1

Status
Not open for further replies.
BabyJeffy

BabyJeffy

Programmer
Sep 10, 2003
4,189
GB
I have put together a simple 2 column layout template and I wanted to offer it to those in the forum (for comment as well as for re-use by others). This layout looks the same on: Safari (Mac), Firefox (Mac/Win), Opera 7.2 (Win), IE 6 (Win), Netscape 7 (Win).

This template delivers content to the left (as a navigation strip currently 200px wide) and content to the right (filling the width of the page dynamically). The left column always stretches to the "page fold" and then goes beyond should the content on the right column exceed the page fold.

I haven't bothered trying to add in any special font styles... as this would detract from the purpose of this exercise... which was to deliver a template for others to build on.

A sample of this layout (including some javascript controls that I put there to help visually show how the layout works) is available at:

Alternatively, the raw template is included below without any content:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
<meta name="author" content="Jeff Home" />
<meta name="description" content="2 Column CSS Layout" />
<meta name="copyright" content="Copyright © 2005 - Jeff Home" />
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="content-language" content="en" />
<title>2 Column CSS Layout</title>
<style type="text/css">
body { height:100%;color: #000000;margin:0px;padding:0px;background-color:#6666ff; }
.outerTable { position:relative;width:100%;border:0px;margin:0px;padding:0px;border-collapse:collapse;z-index:1; }
td { vertical-align:top;padding:0px 0px 0px 10px;margin:0px; }
.leftCell { width:190px; }
.leftStrip { position:absolute;top:0px;left:0px;width:200px;height:100%;z-index:1; }
.red { background-color:#ff6666; }
.blue{ background-color:#6666ff; }
</style>
</head>

<body>
<div class="leftStrip red" id="leftstrip"></div>
<table class="outerTable">
<tr><td class="leftCell red">

<!-- place left/navigation content here -->
<!-- place left/navigation content here -->

</td><td class="rightCell blue">

<!-- place right content here -->
<!-- place right content here -->

</td></tr>
</table>
</body>
</html>

Cheers,
Jeff
 
Sort by date Sort by votes
I like it it is simple, i often use the similar design but i include two more things that i think you would find useful. A Title for the page (header) which is just another row that spans 2 colummns and the same with a footer at the bottom of the page. And if you want make the header row three cells, the left and right ones pictures and the center is your page header. A table is the best site like this is the best way because it is easy to maintain and update. And those notes are needed for when your site has many other tables inside that table which is usually the case.
 
Upvote 0 Downvote
Maybe I'm missing something, but this isn't what's generally called a CSS layout is it? You seem to be using a table to do the actual layout, with an absolutely positioned <div> sitting under one of the columns.

Here's a true CSS approach, seems to work in FF and IE6, though I haven't really tested it to destruction...
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body {
   padding: 0;
   margin: 0;
}

#content {
   padding-left: 200px;
}

#sidebar {
   height: 100%;
   width: 200px;
   background: red;
   position: absolute;
   top: 0;
   left: 0;
}
</style>
</head>
<body>
<div id="content">
yadda yadda yadda
</div>
<div id="sidebar">
blah blah blah
</div>
</body>
</html>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote


Maybe I'm missing something, but this isn't what's generally called a CSS layout is it?
Click to expand...

Yes it is. If you want to go ahead and call it something else... fine... but I am more than satisfied calling it a CSS layout.

Here's a true CSS approach, seems to work in FF and IE6, though I haven't really tested it to destruction
Click to expand...

Well... I did test mine to destruction - yours will not perform in the same way across the browsers that mine was tested on. And since when were we not allowed to use Tables for layout? Or divs with absolute position?

I never said that I had created a solution that had no tables... I offered this as a very simple working layout for others to use (and to address some of the questions I've seen posted in this forum recently).

Too many times have I seen people asking for this exact template solution - and too many times have seen solutions posted that were not thoroughly tested across multiple OS and browsers.

I guess I'm lucky in that I have a good test environment here - and I assumed others would like to benefit from the effort I put in. You are still welcome to use it for yourself Chris - it may help you make more compatible cross browser and cross OS solutions into the future.

Jeff
 
Upvote 0 Downvote
Strictly speaking it isn't a CSS layout. It's a table layout that employs CSS to style the elements and that's a thumbs up!
A CSS layout uses CSS to position elements on the pages without resorting to using tables to do it.
There is nobody saying you can't use tables for layout, it's just that currently parts of the web design community are pushing the use of CSS layouts over table layouts.
Why is this?
Well, CSS layouts allow the opportunity to create more accessible web pages and more streamlined, semantically structured code and possibly more search engine friendly pages. That is seen as a good thing. It's tricky, and it's fraught with pitfalls because of browser interpretation of the CSS guidelines. But some of us like to "push the envelope".
Personally I now always try to use CSS layouts in my work. I find that the extra time I may spend getting it right is saved when I need to amend the site in future. One example would be a site that I built that had a load of content, but then the owner wanted to change the look (dramatically).
If I'd used a table layout I may well have had to basically rebuild the site. However, all I needed to do was create a new stylesheet that repositioned and restyled the same content. I think I had to make 3 changes to the actual markup and one of them was the name of the stylesheet being used. That is the power of a CSS layout.

There is nothing wrong with what you have done though, and you didn't actually say it was a CSS layout anyway (except for the filename).

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time
 
Upvote 0 Downvote
Foamcow said:
and you didn't actually say it was a CSS layout anyway (except for the filename)
Click to expand...

And the thread title "An easy to use 2-column CSS layout" obviously... ;-)

--James
 
Upvote 0 Downvote
I am more than satisfied calling it a CSS layout.
Click to expand...
Evidently, but what, then, is your definition of a "CSS Layout"? Mine would be "A layout that employs CSS instead of tables to lay out page elements". A quick google - - comes up with a lot of pages that seem to follow my line.

I just put my example together in five minutes, I was suprised that it worked as well as it did. If you're looking for more case-hardened examples, try some of the sites that Google search comes up with.

If you want to stick with tables, or use a hybrid approach, that's up to you. It's a free country. I still use the odd layout table myself - for things that I can't get to play with current browsers' CSS support. But calling them "CSS layouts" just because you've got a stylesheet is just confusing the issue.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
It's becoming more and more standard that designers only employ the use of tables for their main and originally-intended purpose: to display tabular data.

It was the CSS early-adopters who started the crusade to leave tables out of the layout, instead using CSS only. Now, it's generally accepted that CSS is a much better layout solution than tables--the goal of CSS being to separate content from design/layout.

I really don't want to get into a semantics debate, but I'd say what you posted is more accurately called a "CSS-enhanced layout."

Either way, it works. And as long as it validates, go for it.
 
Upvote 0 Downvote

I think that as soon as IE starts properly supporting the min-height and max-height styles, then we'll start seeing some really good non-table CSS-based layouts.

Jeff - as you say, it is purely a starting point for people to build on, regardless of whether they keep the tables or not. I think it's great that you've tested it "to destruction" across so many browsers - this is something that so often people fail to do.

Dan


The answers you get are only as good as the information you give!

 
Upvote 0 Downvote
Here's a true CSS approach, seems to work in FF and IE6, though I haven't really tested it to destruction...
Click to expand...

Hey Chris Old Bean,

I think we can work together, with the many other very talented contributors, to make this forum a great place. We all have something new to learn and contribute.

Happy St. Patricks Day!

Clive
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
815
pmonett
pmonett
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
758
bdwilcox
bdwilcox
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
642
PeDa
PeDa
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
224
lmcate
lmcate

Part and Inventory Search

Sponsor

Back
Top