Making columns

jakyra · #1 Feb 18th, 2004, 19:47

I know *nothing* about CSS.
I've tried to make it work before and failed.

What I really want to be able to do, is make columns in my document. I have a navigation menu that's currently at the top of the page that I would like to move to the side.

I'd rather not use tables.

I'd like it to make itself as narrow as possible.

How do I even start?

thanks
jakyra

Galaxyblue · #2 Feb 18th, 2004, 23:17

Hi...

Can you use columns without a table... I too am very new to CSS and I've just looked in my book and it only refers to columns that are within tables...

I would be interested to know...

Why are you against tables?

Sarah

courtjester · #3 Feb 18th, 2004, 23:29

Tables are the old Way Galaxy... CSS is the new way and in the future will be the only way.

Galaxyblue · #4 Feb 18th, 2004, 23:31

Yes honey, I know, but, you can still use tables in CSS.

Galaxyblue · #5 Feb 18th, 2004, 23:38

This is what my book says - and I welcome any corrections as this is a good learning curve for me too..

An Example:

<table>
<tr class=r1><td> 1 <td> 2 <td rowspan=2> 3
<tr class=r2><td colspan=2> 4
<tr class=r3><td> 5 <td> 6 <td> 7
</table>

and the style:

td {border: solid}
tr.r1 {background: #F99}
tr.r2 {background: #9F9}
tr.r3 {background: #99F}

So... once you get the table / column how you want it, can you not just apply the style and link it via . or #??

I'm sorry if I am confusing things anymore

Webforumz Staff · #6 Feb 19th, 2004, 01:09

I think Jakyra also wants to use CSS to position the content. I don't know enough about CSS to do what you're describing if that's the case...

jamslam · #7 Feb 19th, 2004, 07:25

*digs through files.. I know I have it some where*

Ah I found it

Something I wrote, just a basic header with a two column layout. No tables, no positioning. Very stable too..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> something </title>

<style type="text/css">

body {
margin: 0px;
color: #ffffff;
}

p {
font-family: verdana, arial, serif; /* you should always specify a generic font as a last resort */
color: #ffffff;
}

/* try not to give the browser
too much information, such as
pixel perfect widths and height
let the browser pick the widths
and heights, according to the content
inside the block... it will come out much better */
#header {
background: #c0c0c0;
padding: 4px;
}

/* this will help even out the columns...
this background color should match that of your
left column */
#container {
background: #202020;
}

/* in order to make a two column layout
like you want, you do however need to specify a width
for at least one of the columns...The float property also
comes in handy here */
#left {
background: #202020;
width: 200px;
padding: 4px;
float: left;
}

/* no width is needed here, as it will just take
up the rest of the space... but note the margin-left
property... it's the width of the left column, and the
padding*/
#right {
background: #404040;
padding: 4px;
margin-left: 208px;
}

/* this is very important.. as it makes it mozilla and
many other browsers show this correctly */
div.spacer {
clear: both;
}

</style>

</head>
<body>

<div id="header">

Text in the header</p>
</div>

<div id="container">
<div id="left">

Text in the left column</p>
</div>

<div id="right">

Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column Text in the right column </p>
</div>

<div class="spacer"></div>
</div>

</body>
</html>

Galaxyblue · #8 Feb 19th, 2004, 07:50

Wow! Jamslam, you are a neverending source of walking information

I'm gonna give that a go to later

jakyra · #9 Feb 19th, 2004, 16:26

YAY! It worked perfect!

Now I have a template for adding the rest of the CSS that I always new I should.

Thanks so much, jamslam!

jakyra

Galaxyblue · #10 Feb 19th, 2004, 18:42

Well done Jakyra!!

jamslam · #11 Feb 19th, 2004, 19:01

No problem, always glad to help

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] 3 columns?	PicoDeath	Web Page Design	31	Dec 8th, 2007 21:33
2 columns	alexgeek	Web Page Design	2	Aug 15th, 2007 00:57
3 Columns with CSS	Pádraig	Starting Out	8	May 31st, 2007 10:32
Three columns	R8515198	Web Page Design	5	May 24th, 2007 20:16
I still don't get faux columns.	pdk	Web Page Design	8	May 21st, 2007 11:52

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Making columns