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 class="content">
	somthing thats needs to be ~30% from top


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

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

Edited by welkam: n/a

8 Years
Discussion Span
Last Post by johnsteve.bravo

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.


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.


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.


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


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.


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...

Edited by drjohn: n/a


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.


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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.