Topic: (I hope..) a simple cSS question - 'table' layout

http://65.50.81.109/tbs/template.asp

I am trying to get it so the left nav-bar extends its black background all the way down to the footer, regardless of the lenght of the content .. yet this seemingly simple problem has me stumped, can anyone help?

I'm afraid to say that I don't think this can be done with CSS currently. Give it some time to see if anyone disagrees with me, though.

[edit: actually, yeah, it can be done in a few different ways. None of them are good, in my opinion. Among your options:

- float the content to the right, instead of the sidebar to the left.
- put both content and sidebar inside a relatively positioned div with left:0, top:0, and absolutely position the sidebar, while simultaneously giving the content a left margin to leave room for it.

Both of these solutions then requires that you make use of background colors or vertically-repeating background images to make the blackness stretch all the way.]

[This message has been edited by Slime (edited 10-16-2003).]

as much as I wanted to avoid it, opt'd for a table-layout for the time being. Just cleaned up/re-did the old template by hand which somehow, managed to use like, 12 different table cells and a zillion small graphic files and drove me NUTS when using it.

i'll fiddle around with your suggestions and see if I can get it working .. would like to get all my stuff over to a CSS layout

Yep, you'd think that would be a simple thing to do but from what I gathered back when I was trying to do the same thing it's just not possible with CSS.

What I'd suggest would be to make the page take up the entire broswer window. Then you could specify the background color of the page as black and float that white content div on the right like Slime suggested. That could be easily done and I think it would look a lot better to have the entire page black anyway.

:::11oh1:::

Yup, this is a tough one. Don't think we'll be able to find a quick CSS solution for this but...

I know a way to approximate the effect, but it requires a structural hack. What you do is nest both the content div and sidebar div in a "container" div, set the background of the container div to black, and then set the background of the content div to white. This way, the container will expand with the content, making the black area expand with it.

Once again, this isn't a perfect solution, but it's as close as I've come.

Hrmm, was thinking. - What about using javascript?

once the page is loaded, get the height of the 'content' ID and then set the height of the navbar to the height of the contentID.

pesducode

- on page load/reload/re-size
-- x=contentID.height
-- navbarID.height=x;
?

Damn nay-sayers.

Yes, it can be done with CSS--and rather easily. Here's how:

Step one, make a box to contain everything (in your case, you want it to be 740px for some reason). The area is set with a background color of #000 because you'll want the left side to reach the bottom, and appear black. The right side will be defined as #fff.

#big_box { width : 740px; background : #000; }

Next, make the box for the left-hand stuff, which you want to be 153px.

#left_side { width : 153px; float : left; }

Finally, make the content area on the right, which you have defined as a shady 500px. I would suggest using the rest of that 740px, putting it at 587px, which I will use for the purposes of this example. Note the background color.

#right_side { width : 587px; float : right; background : #fff;}

Now, link them together, nesting the left and right side divs into the big box div.

<div id="big_box"><div id="left_side">---left side content--</div><div id="right_side">--right side content--</div></div>

Notice the lack of line breaks between divs. That is important, or you'll get a bit of white space in some browsers.

-S

[This message has been edited by twItch^ (edited 10-17-2003).]

Blah .. ignore me I was rambling and suddenly realised it ... unfortunately "delete-post" only works for forum moderators ...


[This message has been edited by trib (edited 10-17-2003).]

Man, his example is gone but I don't think yours would work Steve. He has a button or something at the bottom of his left div that he wants to always be at the bottom near where the content div ends.

I think.

:::11oh1:::

Even then, krets, just make another div at the bottom which uses a background image of black on the left, white on the right, left-align, put the image in.

OR, you can make a new id to do relative positioning to stick an image down at the bottom. Totally doable.

-S

Pssst, Krets... that's twItch^


twItch^: Heh, that's the method I just described, although I thank you for elaborating. And no, it wouldn't work if he wanted a button at the bottom of the sidebar

Yes, but I know who the man behind the curtain is...

:::11oh1:::

Of course it would work. It just takes an extra id for positioning.

If you can do it in tables, you can do it in css. That's it's frigging point.

Fugging non-believers.