CSS Problem (again!)

[DisgruntledOrangatang]

Haha so I am working on messing around in CSS again because of a problem I see come up often. This is related to window sizes and making some appear consistent regardless of the window size.

I actually applied knowledge from the previous thread where I asked for help (thanks Elradriendir) in this example, but am having a similar problem just vertically not horizontally.

Hi FoH Rox
www.revenantmedivh.com/fohrox/style.css

CSS code block for those 2 lazy to click:

Spoiler Alert, click show to read:

body{
	margin: 0px;
	padding: 0px;
	font-size: 13px;
	background: #999;
}

.clear{
	clear: both;
}

.splitter{
	height: 310px;
	width: 100px;
}

.header_container{
	position: absolute;
	width: 100%;
	left: 0px;
}

#header{
	background: url(images/header.gif) no-repeat;
	width: 982px;
	height: 310px;
	margin: 0px auto;
}

#header_white{
	background: #fff;
	height: 310px;
	z-index: 2;
	min-width: 982px;
	width: 100% !important;
	width: 982px;

}

#header_black{
	height: 310px;
	width: 50%;
	background: #000;
	z-index: 4;
}

.main{
	width: 100%;
	height: 500px;
	top: 310px;
	position: absolute;
}

#main_black{
	height: 100%;
	width: 30%;
	background: #000;
	z-index: 4;
}
#main_container { 
	min-height: 100%; 
	height:auto !important; 
	height: 100%;
	margin: 0px auto; 
	width: 982px; 
	z-index: 5;
}
	#left_column{
		float: left;
		color: #fff;
		background: red;
		/*min-height: 500px; 
		height:auto !important; 
		height: 500px;*/
		width: 291px;
	}
	
	#right_column{
		float: left;
		color: #fff;
		background: blue;
		/*min-height: 500px; 
		height:auto !important; 
		height: 500px;*/
		width: 691px;
	}

What I am trying to do is create a straight black bar along the left. It's currently broken up into vertical sections because of where I want the content to go. Right now to achieve that I need either the red (left_column)and blue boxes (right_column) to expand the full height of the page (regardless of user's resolution and size of content within) or somehow get the bottom black area (main_black) to be aligned with the top black area (again regardless of window size).

The problem is I can't use any static numbers for width and height because of changing window sizes, nor can I use %s on main_black because that also changes with window size. I thought the easiest way would be setting the red and blue boxes to height = 100% but that seemed to have no effect. Not sure what else I can do to achieve what I want.

[Zeste]

I can probably fix this but I can't tell what you want from your description.

You want a black background for the left coulumn of your page, which grows and shrinks relative to the browser width, with content on the black and the white?

So basically, a dynamically scaling sidebar of black that is never an absolute width in px or %, but doesn't crush when the browser is small, but expands when it is big?

I am gonna see if I can make something.

Also, are you trying to use pure CSS for this, cuz I could do a "smoke and mirrors" fix in like 30 seconds.

[Luthair]

I think your problem is in #main_container: height:auto !important;

Assign a fixed value (ie 100%) and it should allow you to assign values to the red/blue sections.

If you aren't using it already, have you tried firebug the Firefox addon?

[DisgruntledOrangatang]

Luthair, tried that didn't work and yeah I use firebug, but ith as been causing me weird problems since 3.5 came out. Tried many things with adjusting the heights and min heights and removing them.

Zeste, I think you are correct from how I am reading it. Basically the page is being made to support a min resolution of 1024x768. So I am putting all the content in centered on the page and having a width of 982px. But of course if someone has a much higher resolution, I want the page to still look good. Right now I have that supported horizontally. Regardless of window size the black white and grey areas expand infinitely, but I am having trouble doing this vertically.

So yes I would like to have that black bar go all the way down and it remain consistent as to where it divides the page regardless of window size. So even if the content was smaller than a person's resolution, the splitter wouldn't just stop.

Yes I would prefer pure CSS, but what did you have in mind? As long as it doesn't make the load size increase ridiculously I am open for whatever.

[Vorph]

Not at home today, so I can't look at it in depth. Have you looked at GameFAQs' layout for some 'inspiration'? At first glance it looks like your HTML is overly complicated for what you're trying to do.

[DisgruntledOrangatang]

The problem with gamefaqs site and why there's is a little easier to do is because their background is consistent when it stretches from left to right and there content box has no visible dividers. In my example the stretching background is two different things on the same horizontal level, which makes it a little harder to do.

In the previous thread with a similar problem (using what we found out in there for the top part oh this page http://www.fohguild.org/forums/devel...s-problem.html) it was simpler, but the problem was discovered when shrinking the window smaller than the supported resolution, it freaked up.

So it could be more complicated than it needs to be, for am I notorious for that, but from previous work, that was the only way I could figure out how to to it to work, and then in this example, I can't even get it to work -_-.

[Lenas]

Looked into min/max height/width at all?

Also, Im not understanding from your test page. Can you attach an image of how it's supposed to look?

[Vorph]

Yeah, I would need to see some sort of mock-up too. I've always sucked at visualizing what people want based on a text description. My best guess is that it's supposed to look something like the picture below, though hopefully those aren't the final color choices.

[Luthair]

Originally Posted by DisgruntledOrangatang

Luthair, tried that didn't work and yeah I use firebug, but ith as been causing me weird problems since 3.5 came out. Tried many things with adjusting the heights and min heights and removing them.

This isn't what you're going for:

[DisgruntledOrangatang]

Nope, this is what I want, the outlines signify where they boxes are positioning at the current link. This would be viewing it at the 1024x768 resolution. But I want the black bar /grey bottom design to expand to the bottom of the user's screen regardless of content. I would change the red and blue to black and grey, I just made them like that so the containers are easy to see what they are doing.

[Lenas]

The problem here is that most browsers don't support percentages for height properties, which means you can't go with what would be an obvious height:100% on container elements.

If you could, it would be rather easy. You'd have a container at 100%, two column divs at, say, 30% and 70%, and containers within those to hold your content.

The easiest solution here would be to give up the horizontal scaling and use a background image/color for each column's color.

[Luthair]

Originally Posted by Lenas

The problem here is that most browsers don't support percentages for height properties, which means you can't go with what would be an obvious height:100% on container elements.

If you could, it would be rather easy. You'd have a container at 100%, two column divs at, say, 30% and 70%, and containers within those to hold your content.

The easiest solution here would be to give up the horizontal scaling and use a background image/color for each column's color.

I'm not aware of any modern browser which doesn't support percentage heights.

[Zeste]

Originally Posted by Luthair

I'm not aware of any modern browser which doesn't support percentage heights.

It's antiquated and taken out of things like Dreamweaver CS4 and such, for the autocomplete tags.




Are you trying to do 100% clean CSS with this? I can do what you want, but it will involve TABLES and BACKGROUND TRICKS!!!!!

Since I do this for work, often when something isn't working, I go for the "visual end result" instead of trying to code it a certain way. Throw up some tables, some transparent 1pixel gifs spacers... oh yeah, now you're coding with Crisco!

[Zeste]

Can you do more than just do the area outlines and dummy text? Like, why is the top-right white, but the rest of that column grey? Is that going to be a header or something? And are you trying to center your content VERTICALLY within the browser? Or will you have just a fixed header height.

Why not do a screenshot of how you want to look in a really wide and tall browser, and also a smaller browser than is just a bit larger than the content. I still am trying to figure out what you want it to do. Sounds like you want a standard, "left column/right content" site, but instead of having it stuck to the left edge of the browser, you want the content to float in the center, but then also have the entire page background centered but line up with the columns of your content?

[DisgruntledOrangatang]

Alright hopefully this will be a bit more clear.

And are you trying to center your content VERTICALLY within the browser?

No, I just want to make sure that if the content does not vertically take up the user's whole screen. The black/grey division design will go to the bottom of the screen and not just stop. This is what I can't seem to figure out how to do. I even found this CSS 100% Height | TutWow and tried doing it like it says (setting html & body to min-height: 100%) but that didn't work either though I could be doing it incorrectly, there was quite a few comments about it, something about a page wrapper.