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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Three column site

Status
Not open for further replies.
ThinkGeekness

ThinkGeekness

Technical User
Jan 20, 2003
55
US
I want to have three a site with three columns (menu on left, content in the middle, and ads on the right). What would you say is the best way to do this?

Thanks
 
Sort by date Sort by votes
Code: 
<table width=&quot;100%&quot; height=&quot;100%&quot;>
<tr>
<td width=&quot;150&quot; id=&quot;menucolumn&quot;> </td>
<td id=&quot;contentcolumn&quot;> </td>
<td width=&quot;100&quot; id=&quot;adcolumn> </td>
</tr>
</table>

This will fill up the width and height of the browser. However since the height=&quot;100%&quot; isnt still 100% websafe it works fine in all new browsers and most slightly older ones (but i have had issues with it). then just add any content you want inbetween the <td> tags.

[Hammer]
Nike Failed Slogans -- &quot;Just Don't Do It!&quot;
 
Upvote 0 Downvote
Something else you may want to consider is that using tables for page layout is anti-standards and may cause you more long-term trouble than it avoids right now. Any good book on CSS should give you an example of a multi-column layout that doesn't use tables. The book I learned to do this in is &quot;Designing CSS Web Pages&quot; by Christopher Schmitt (New Riders Publishing, 2003). It's 4:30 AM where I am right now, so I hope you'll forgive me if I don't provide code; the CSS is somewhat lengthy, but it'll make your pages much easier to maintain for future generations of browsers... and people using older browsers should upgrade anyway. If they're using computers that are too old to allow them to upgrade their browsers, then they're still doing text-based Internet searches on a 9600 bps (if that) modem and aren't using a Web browser at all. (A bit of exaggeration there, but you get the idea.)

[soapbox]


JavaStripped
&quot;I did *not* escape. They gave me a day pass.&quot;
 
Upvote 0 Downvote
One more thing: If you do use tables, I remember reading somewhere that the Mac IE5 browser has problems with setting table width to 100%; something about the horizontal scrollbar, I think. Sorry, I don't remember any more than that. It's late; I'm going to sleep.

[sleeping]


JavaStripped
&quot;I did *not* escape. They gave me a day pass.&quot;
 
Upvote 0 Downvote
<!-- Just copy and paste this... You can touch it up!!! -->

<html>
<head><title>table play/with CSS</title>

<!-- In the heading -->
<style type=&quot;text/css&quot;>
table { width: 100%; height: 100%; }
td.leftnav { width: 15%; height: 100%; vertical-align: top; }
td.main { width: 75%; height: 100%; vertical-align: top; }
td.right { width: 10%; height: 100%; vertical-align: top; }
</style>
</head>
<body>

<!-- In the Body -->

<table>
<tr><td class=&quot;leftnav&quot;>
Links Here<br />
More Links<br />
and More
</td>
<td class=&quot;main&quot;>
The main content of your page will go here!!! sakfdhasd fsdh fa sdf i fsad faioyfds ifhsdaoifis hfisa[f fsdih adfhf fdsah fa fsaod fa ds sdafis f
</td>
<td class=&quot;right&quot;>
Pics<br />
or<br />
Whatever
</td></tr>
</table>
</body>
</html>
 
Upvote 0 Downvote
I'm not familiar with the use of
Code: 
 <br />
-- is that intended to open and close the
Code: 
 br
tag? Is it XHTML or something? Thanks.
 
Upvote 0 Downvote
Thank you everybody who replied. I am buying that CSS book today.

Thanks
 
Upvote 0 Downvote
I have some CSS templates you can play with:

BUT CSS layouts take a lot of testing and debugging. The above templates are IE only and need to be debugged in other browsers.

Although tables aren't intended to be used for layouts they are easy to use, robust &amp; dependable and need less testing.




 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
88
pendle666
pendle666
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
63
jason.lex
jason.lex
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
89
Carlvic
Carlvic
kjv1611
  • Locked
  • Question
How Can I Know This Site Doesn't &quot;Phone Home&quot;? 2
Replies
9
Views
118
spamjim
spamjim
ember1205
  • Locked
  • Question
Form submit, specific controls needed (3rd party site, blank window, message, etc.)
Replies
1
Views
60
ember1205
ember1205

Part and Inventory Search

Sponsor

Back
Top