Positioning Problem (CSS + XHTML question)

fluppet

Hi, I want a layout like this:

---

title

---

side |______nav bar_________________
bar |
|
| content
|
|
|

(see edit below)

using a table-free design. I have tried playing around with the XHTML and CSS, but I can't seem to get a cross-browser compatible way of doing it. (It's the nav bar going all the way across the page except the side bar that is causing the problem)

You can see one of my attempts at http://www.maths.tcd.ie/~arichar/mathsoc (I know there are a few incorrect things in there, like specifying a width as 100%-300px, but I was getting desperate).

I know I could probably find the answer if I had a good look around positioniseverything, or some other such website, but I am trying to use the internet on a 14.4Kbps connection that keeps disconnecting... it took me quite a while just to post this message.

So what I would like is just a quick sample of how the XHTML should be layed-out, and the relevant bits of CSS.

Thank you very much!
-fluppet

Edit: Okay, the layout I tried to do above isn't displaying correctly. Basically, it's a title bar (100% width), a side bar (from bottom of title bar to end of page, on left of page), a horizontal nav bar (from side bar to right side of page), and a content section below the nav bar and to the right of the side bar.

seamus

Best way is to break your design up into blocks. If you make it so that a block can only have horizontal rows or vertical columns, and not both, it makes everything much simpler.

Quick example for the above:

[html]

<div id="topContainer">

<div id="headerContainer">
Header info here
</div>

<div id="bodyContainer">

<div id="sideContainer">
Sidebar in here
</div>

<div id="navContentContainer">

<div id="navContainer">
Nav menu in here
</div>

<div id="contentContainer">
Content in here
</div>

</div>

</div>

</div>

[/html]

You can then use CSS to dictate how each block is laid out in relation to its parent.

fluppet

Thanks seamus!
Your suggestion worked perfectly (although in my situation it was easier to take-out the separate sidebar div, as it was only a background img + colour going in there, so I just had that in the navContent container.