CSS Layout w/o tables

fifeclub posted this at 21:34 — 2nd June 2004.

Joined: Feb 2001

I've always used tables to "section off" areas of my website templates. How do I do this in CSS without tables? Is it only by using absolute or relative positioning?

Here's my learnin' page and as you can see, all my lorum ipsum is underneath the menu rather than to its right side. How do I best get my main content where it should be? (All my CSS is on the page so it's really easy to see what I did at a quick glance.)

Thanks.

ShaneS posted this at 23:26 — 2nd June 2004.

They have: 93 posts

Joined: Jun 2003

You need to use CSS float:

That will make your tables align left or right.

I did my site with divs and CSS and let me tell you...its is NOT fun...I eventually went back to tables because I was tweaking for over a week, and with tables it took me all of 3 hours to get it exactly the way I needed it.

Float your menu and the content SHOULD move next to it...I didn't view the source so it might not do anything.

[Design Alpha] -Web Services : Design,Hosting,Advertising,Software
Ask about custom pricing on hosting!!
Site Assets: [UltraGaming.com] [Blades of Warcraft]

Suzanne posted this at 23:52 — 2nd June 2004.

She has: 5,507 posts

Joined: Feb 2000

Mike, you need to have all that text in an element. No naked text in the element. And close all your tags.

Run it through the validator, then try styling it. It works FAR better on valid code, and the best code has all the tags closed.

kb posted this at 13:51 — 3rd June 2004.

He has: 1,380 posts

Joined: Feb 2002

use a div, so it would look like this:<div class="main">This is the body text of my page..blah blargh blah</div>and the CSS would be something like

div.main {
float: right;
width: 70%;
height: 100%;
}

'
Adding all the necessary tags, like you would for tables, in the div class

fifeclub posted this at 15:43 — 3rd June 2004.

He has: 688 posts

Joined: Feb 2001

Thanks y'all. I wanted to follow up with how I finally solved it incase it can help anybody else in the future. I tried float and absolute-positioning and both worked but with snags. Finally I decided that rather than trying to move the main content, I could float-left the navigation menu.

#navigation {float: left; padding-right: 10px}'
That worked beautifly. Thanks for the help that led me to the right functions to be trying out.

P.S. That was the first time I ever used "id" instead of "class"