Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS question for dummies

Er, okay, so I'm the dummy, but... :D



11:29 am on Aug 31, 2002 (gmt 0)

10+ Year Member

Hi there,

I have a cold, and instead of going out tonight (er, last night now) I spent 16 hours straight learning the basics of CSS so I can completely rewrite my main site. Eeeek!

Unfortunately, I think I'm banging my head up against an e-wall trying to do something that can't be done.

Specifically, I'd like to be able to:
- have a 2 column set-up, content in left pane, nav in right pane
- have the content listed first in the HTML
- have the nav pane set at 150 pixels, and the content pane the REMAINDER of the browser
- ideally have this work in NN4.x as well (eegads!)

I've figured out how I can do almost the above, but with the nav pane on the left. But I don't like that, since it's not the look I want, and I also fear that search engines may penalize me for having the nav stuff ahead of the content (though I suppose I could use SSI includes).

Anyway, apologies in advance if I'm missing something really obvious here, and thanks for any advice you can offer.



11:59 am on Aug 31, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Hi Adam

I'm just learning myself at this point, so I can't give you any hard and fasts, but this is a fabulous thread in which Rhys has a 3 col liquid CSS layout that works in NN4:


You might be able to find an answer in there.

Good luck :)

[edited by: SuzyUK at 4:03 pm (utc) on July 24, 2004]
[edit reason] link moved, so replaced with correct one [/edit]


12:20 pm on Aug 31, 2002 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I'm pretty certain you won't get the 150px length to work with that example...

Here's one that works in everything except nn4 (only tested in Moz but should be fine)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<style type="text/css">
body {
color: #00000;
background-color: #FFFFFF;
#right {
position: absolute;
top: 50px;
right: 0px;
width: 150;
border: 1px solid #000000;
#content {
position: absolute;
top: 50px;
padding-right: 200px;
<title>2 column layout</title>
<div id="content">

<p>Here is your content div with a padding of 170px on the
right side to accomodate the navigation panel</p>
<div id="right">
<p>this is the right nav panel</p>



8:48 pm on Aug 31, 2002 (gmt 0)

10+ Year Member

Hey, thanks!

I am really getting to the point where I'm just ready to say "screw it!" to those using NN4.x and other screwy ancient browsers.

I'm running a darn personal/entertainment site, not a government agency site with 100% accessibility requirements... so, forgive me for sounding cranky :D


[edited by: Brett_Tabke at 4:40 am (utc) on Sep. 2, 2002]
[edit reason] no sig files please. [/edit]


12:26 am on Sep 2, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

don't shift to css until you are ready to do a complete redesign...it's far easier to rip the whole lot up and build again to make best use of the additional flexibility of css

that's my advice...I redid our two sites last year...the first took ages because I tried to keep the same design as the old table version...the second was much easier since I was allowed to build to a completely new look...I'm happy with the second site...the first is going to bug me until early next year when I get to hack it apart and build again from the content up as part of a complete rebranding


1:33 am on Sep 2, 2002 (gmt 0)

10+ Year Member

You're absolutely right.

I spent another ton of hours last night evaluating what layout I wanted (I've decided to go with a 3-column dealie), and soon I'll be completely starting from the ground up.

I'll take the text (and text only) from my old site and cut and paste it into new pages in a "/wwwnew" directory, then slowly and methodically apply styles to it and shift content from one div (column) to another as warranted.

It's gonna take a long time, but I'm excited and convinced it's worth it.

If only I could get over the guilt of giving NS 4.x people the finger. I've thought and thought and thought about supporting them with separate stylesheets, but the bottom line is... I'm gonna have to let go eventually, and it might as well be a clean break.

[self-edited to remove sig]

[edited by: ThatAdamGuy at 2:21 am (utc) on Sep. 2, 2002]


2:10 am on Sep 2, 2002 (gmt 0)

10+ Year Member

ThatAdamGuy - I would remove those url signatures pronto.

I have gotten Nicks example to work also in NN4, serving it a different stylesheet with the attributes changed

#right {position: absolute;
top: 50px;
left: 75%;
margin: 0px;
width: 150px; }

#content { margin: 0px 200px 40px 10px; }

Note, numbers are not tested, you have to play around with them to see how they work for the screen dimensions you are aiming for, I figure that NN4 users are less likely to be on big monitors, so adjust to suit. This is a less precise layout than the newer browser stylesheet, but does use the same html to get a decent looking page to NN4.


2:20 am on Sep 2, 2002 (gmt 0)

10+ Year Member


Thanks much for the NN4 mod! I will give that a try.

Also thanks for the prod to remove my sig. I'm used to including it on less-sophisticated boards that do not include a profile option, and given your reminder, I realize that including the same URL's here is a bit redundant.


2:26 am on Sep 2, 2002 (gmt 0)

10+ Year Member

your welcome.
re sigs,they are also against the TOS
It helps keep the forums clean and useful.

Featured Threads

Hot Threads This Week

Hot Threads This Month