Stupid web design question

[GeneralElectric]

So I'm making a basic web page about myself so I can get some work and host other projects I've done.

Now I'm trying to get a tool bar on the left side of the screen in a column and I get figure out how without making a table. Any ideas on how to do this?

[bongomania]

You're probably looking at CSS as the next step in coding. Check out some CSS tutorials. There are fancier languages for this sort of thing of course, but no need to go that far for a toolbar.

[tekdiver500ft]

You almost certainly want to use CSS for tasks like this. If you're on a Mac (it might be available for Windows, too, I don't know), get "CSS Edit" to ease the task. This program will not only help you write efficient CSS, but will even teach you what does what and how to write it.

[Selta]

What's so wrong with a table? You can also do an unordered list.

[tekdiver500ft]

While there is nothing "wrong" with them, tables are somewhat limited, and harder to use. With CSS, you can change the location, size, and design of the toolbar with a single line of (simple) code. You can't do that with a table.

[sloasdaylight]

You're gonna want to use a DIV, and use some CSS to code it up.

Something like this would probably be what you want:
<style>
.toolbar {
width: 150px;
float: left;
background-color: red; (this is just while you're organizing your page layout);
}
</style>

It's going to be important to make sure that you wrap your entire content area in a wrapper div.

Also to Ray, you can use tables, but they're clumsy and not designed to be used to build structural elements.

[RosieB]

Yes, use div tags. If you have a column on the left with your toolbar (which should be a list, btw) then your content will be enclosed in another set of div tags, essentially making 2 columns. Use id="column1" for the navigation column (same idea as sloasdaylight's .toolbar) and use CSS to float: left. Set width to whatever looks right. Then use id="column2" for the content, float: left and set width so that it stacks next to column1. If width on column2 is too wide it will go underneath column1 instead of beside. Then if you have a footer or anything you want to go underneath the columns wrap in div tags again, set an id for it and do a clear: both. This is needed to stop the column process. Let me know if you want to see exact code.

[squiresuzuki]

You need a CSS div. Never use tables for page structure.

Here's all the code. Just paste it into your editor and try it out.

<style type="text/css">
#left {
width: 300px;
float: left;
background-color: #a4f1ff;
padding: 10px;
}
#main {
margin-left: 30px;
width: 700px;
float: left;
background-color: #ffc67b;
padding: 10px;
}
.clear {
clear: both;
}
</style>
<div id="left">
<b>Left side div</b> Filler text... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="main">
<b>Main div</b> Filler text... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="clear"></div>

[RosieB]

^ Yes, that's what I was saying. Not typing all those symbols on an iPod!