Can't figure out how to replace a table with css 1

[mopacfan]

I'm using a css template from OSWD.org. I have almost everything working the way I want it. However, I have the main content in a <div> and in this div, I need two columns, side by side. I used to use a table for this layout but I would like to eliminate the use of tables and have the two columns in css. I've tried div and span. No matter what I do, the second "container" ends up below the first "container" instead of beside it. Each side should be the same width. The template I'm using is here:

http://www.oswd.org/design/preview/id/2450.

The div in which I'm working is the class of "article". Any help will be greatly appreciated. Thank you.

 

[cLFlaVA]

gah!

i'd ditch that layout. try changing font sizes in your browser.

one of the basic premises behind the columnar layout is this (although there are several):

body {
    min-width: 700px;
}

#wrap {
    width: 700px;
}

#left-col {
    width: 500px;
    float: left;
}

#right-col {
    width: 200px;
    float: right;
}

your html would be:

<div id="wrap">
    <div id="left-column"></div>
    <div id="right-column"></div>
</div>

also, check out a list apart - they've got a lot of good stuff - try searching for "faux columns".



*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[mopacfan]

I'm sure the template is not the slickest thing out there, but for someone like myself that has been doing everything with tables since 1995, this css stuff if not all that intuitive. I tried your approach, but the elements on the page are now just getting jumbled up. I wish there were a way to attach an image here. So this is the best I can do so you can see what it looks like:

http://www.mocap.com/_temp/example-ie.jpg

http://www.mocap.com/_temp/example-ff.jpg

Here is the layout code:

<div class="article">
<h1>Plastic Caps</h1>
<div class='descleft'>
<p align="justify">bla bla bla</p>
</div>
<div class='descright'>
<p>more bla bla bla</p>
</div>
</div>

Here is the css:

.article
{
BORDER-RIGHT: lightgrey 1px solid;
PADDING-RIGHT: 10px;
BORDER-TOP: lightgrey 1px solid;
PADDING-LEFT: 10px;
BACKGROUND-IMAGE: url(../images/backgrounds/articlenormal.jpg);
MARGIN-BOTTOM: 10px;
PADDING-BOTTOM: 10px;
MARGIN-LEFT: 170px;
BORDER-LEFT: lightgrey 1px solid;
PADDING-TOP: 10px;
BORDER-BOTTOM: lightgrey 1px solid;
BACKGROUND-REPEAT: no-repeat;
BACKGROUND-: #cccccc 1px solid
}
.descleft
{
FLOAT: left;
WIDTH: 250px
}
.descright
{
FLOAT: right;
WIDTH: 250px
}

 

[dkdude]

Didn't check out your site, BUT one important thing: in your css file -change all property names to lowercase:

BORDER-RIGHT: lightgrey 1px solid;

... change to

border-right: lightgrey 1px solid;

... and so forth.

You can verify your stylesheet here :

http://jigsaw.w3.org/css-validator/

 

[Vragabond]

It's always a lot harder to fix something that is inherently broken than to start with something clean. You're having mostly problems because your floats are not cleared. You can use a multitude of solutions for that, although I found that the old div with clear at the bottom is still the most reliable one. Also, your last declaration in .article css is gibberish: [tt]BACKGROUND-: #cccccc 1px solid[/tt]. To help with the rest, we would need to see the actual page I'm afraid.

 

[mopacfan]

And unfortunately, it's on the in house development server. I've moved it out to a temp location on the production site:
(remove the spaces, I don't want the SE's picking this up)
http:// www. mocap .com/_temp/default2.asp
http:// www. mocap .com/_temp/insidepage.asp
http:// www. mocap .com/_temp/main.css

I've got most of the bugs worked out (or so it seems). But I would really like this to validate. I'm going out today to buy a book on css because that's the easiest way for me to learn is by reading a how to book. So if there is one you recommend, I'd appreciate the heads up.

Thank you

 

[traingamer]

Recommend highly:
Dan Cederholm: Bulletproof Web Design (New Riders, 2005, ISBN 0321346939)
Charles Wyke-Smith: Stylin' with CSS: A Designer's Guide
Eric A. Meyer: Eric Meyer on CSS
Eric A. Meyer: More Eric Meyer on CSS

fun read (not for starting on CSS):
Dave Shea, Molly E. Holzschlag : The Zen of CSS Design: Visual Enlightenment for the Web


Haven't read, but heard good things:
Hakon Wium Lie, Bert Bos: Cascading Style Sheets: Designing for the Web

Not CSS per se, but good reading:
Steve Krug : Don't Make Me Think: A Common Sense Approach to Web Usability

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill