Css height in % not working

[welkam]

Hello,

I am making a website that will look good in any resolution(its called fluid i think) and i wont that div "space" will be 30% height, but its not working :(

<div id="bg"><img src="<?php bloginfo('stylesheet_directory'); ?>/images/bg.jpg" width="100%" height="100%" alt="">

	<div class="space">
	
	</div>

	<div class="content">
	somthing thats needs to be ~30% from top
	</div>
</div>

style.css

#bg {position:scroll; top:0; left:0; width:100%;}

.space{
	display:block;
	background: url('images/tuscias.png') no-repeat center bottom transparent;
	width: 100%;
	float: left;
	position: relative;
	height: 30%;
	overflow: hidden;
	z-index: 1;
}

[Netprof]

Did you make sure that 30% doesnt conflict with the other aspects of the design? This makes a difference if it doesnt add up to 100% or possibly another div cutting into it.

[Veneficae]

Fluid websites I've seen don't typically use fluid heights, only widths, which are easy to achieve. As far as heights go, if you leave out any height designations it'll stretch to the maximum size of the content within, which is sort of what you're looking for from what I read. Since you want the element 30% from the top, get your minimum height and find 30% of it, and apply that as a margin-top in pixels to the top. When a browser is resized it's always from the bottom, so your element will always remain the pixel amount from the top of the page.

[MidiMagic]

If several attributes conflict, the browser throws away the height attribute first.

The next questions is: 30 percent of WHAT?

It's 30 percent of the height of the container of the tag with the height attribute. If the object is inside another container (such as a paragraph, or a table cell) it's easy. But browsers don't agree on what to do if the container is the body tag or the html tag. Some take it as 30 percent of the content height, others take it as 30 percent of the viewport.

And a div will not expand to the full declared height unless it is full of content.

[zukilover]

if by height you mean distance, then you should use a

margin-top: 30%

, or

position: absolute;
top: 30%;
left: 0

and dont forget to give a:

position: relative

to the parent element

[Netprof]

Yes this is the way to ensure all of your div space is of the position that you wish to keep at a certain height and position.

[master_99]

Instead of giving Hight in % you use padding and margins
.
I found a fantastic site having professional Higher Page rank CSS tutorials
see below link hop its helpful

http://www.tutorials99.com

[drjohn]

You found that site? Gosh and you even based your username on it, you were so impressed. Must be good.

Pity about the Java icon next to a JavaScript tutorial...

[cinneran]

Hey, I know it is quite a long time that there has been some activity over here. But anyway I see that there are a lot of answers over here. I would like to know more about this height issue. I am quite interested in this issue about the height. I don’t see any response from Welkam whether it did help him in getting the correct height. I am really looking forward to a reply about this. Thanks in advance.

[johnsteve.bravo]

Height related issues are very common with divs. I suggest you to use tables for the sections that needs height adjustment.