Runaway CSS Header - Need to find a way to scale it

rhathar

I have my website layout set up purely in CSS, but I have a problem.
The left menu is set to a specific pixel width (200), and the right menu is as well (150). However, the area inbetween is a percentage value so that it will be able to scale with different resolutions easily enough.

Now here's the problem. The header sits on top of that, and for some reason has decided that since it has no width value it will just run off the side of the screen into oblivion. I'd like to try and get it to match up with the right border of the right menu, but I'm not sure how since setting it to a specific width will only work until you resize the window a bit.

If someone could take a look at it, I'd be very appreciative. (Possibly Frih$? I'm not using 'em.)

The main page: http://randomnity.frih.net/index.php
The CSS: http://randomnity.frih.net/aunar.css

Thanks in advance!

riv

First off, I do not know why you have a containing div that is set up to look like it's a iFrame. Unless you're going to have a background surrounding the div, I see no reason you need to make the window smaller than it already is. Very Happy

I don't really have loads of time that I can use to help you by making examples and looking through your css file, but I'm guessing you just want the header background to just stop at the end of the third colum right? If you do, I would suggest putting the header [b]in[/i] the div that surrounds the three colums, and contain the three colums in another div. "clear: both;" that div. Set a percentage for the div containing the header and the three colums, and that should fix your problem.

rhathar

Right now, the problem is that it doesn't have a definite size, in percentages or pixels. Two columns are fixed, one is a percent. Because of that, I can't just specify a set width for the header or the surrounding div (and yes, I do plan on adding more features that will make that necessary later on.)

Is there a way to set it to scale to that? I mean, I suppose I could do something funky and split the header in to, making half of it 55%, and the other half 350 px.. but I'd like to avoid that.

EDIT: Thanks for the help, but I've decided to go with another setup, so this whole question is moot, now.