Expanding div vertically to accommodate content

This site is best viewed in a modern browser with JavaScript enabled.

Expanding div vertically to accommodate content

alen1978

I have basically 3 divs. Top horizontal for title etc. And two vertical ones. Float left and float right. On the left side I input data in the form and it is shown on the right side. But when there is more posts div doesn't grow to accommodate all posts?

header{
  	position:fixed;
  	top:0px;
  	height:15%;
  	left:0px;
  	right:0px;
  	background-color:#333;
  	color:#FFF;
  	z-index:10;
 	opacity:0.6;
 }
 #left{
 	position:absolute;
 	top:15%;
 	bottom:0px;
 	width:50%;
 	height:100%;
 	left:0px;
 	background-color:#900;
 	color:#FFF;
 	z-index:8;
 	overflow:hidden;
 	clear:both;
 }
 #right{
 	position:absolute;
 	top:15%;
 	bottom:0px;
 	width:50%;
 	height:100%;
 	right:0px;
 	background-color:#999;
 	color:#FFF;
 	z-index:8;
 	overflow:hidden;
 	clear:both;
 }

Rickjb39

Have you tried removing the height?

alen1978

Rickjb39;1308303 wrote:
Have you tried removing the height?

Yes. I tried to put it to 100% or auto or to remove it all together. When I remove it or put it on auto it wont scroll. If I put it to 100% it just scrolls little bit,and that's it. I guess it scrolls since it's 15% from top so it scrolls 15% up and down.

Kevin2

Have you tried min-height:100%; ?

alen1978

Kevin2;1308313 wrote:
Have you tried min-height:100%; ?

Same thing as b4. It just scrolls 15% up-down. Don't know WTF is problem here! Bellow is the css code.

/* CSS Document */
body{
	background-color:#383838;
}
header{
	position:fixed;
	top:0px;
	height:15%;
	left:0px;
	right:0px;
	background-color:#282828;
	color:#FFF;
	z-index:10;

}
#left{
	position:fixed;
	top:15%;
	bottom:0px;
	width:50%;
	height:100%;
	left:0px;
	background-color:#900;
	color:#FFF;
	z-index:8;
	overflow:hidden;
	clear:both;
}
#right{
	position:absolute;
	top:15%;
	bottom:0px;
	width:50%;
	min-height:100%;
	right:0px;
	background-color:#383838;
	color:#FFF;
	z-index:8;
	overflow:hidden;
	clear:both;
}
#formaobjavi{
	position:absolute;
	left:20%;
	top: 10px;
	height:auto;
	width:250px;
	border-color:#fff;
	border-width:1px;
	border-style:solid;
	padding:8px;
}
#formaobrisi{
	position:absolute;
	left:20%;
	top: 180px;
	height:auto;
	width:250px;
	border-color:#fff;
	border-width:1px;
	border-style:solid;
	padding:8px;
}
#formaizmjeni{
	position:absolute;
	left:20%;
	top: 285px;
	height:auto;
	width:250px;
	border-color:#fff;
	border-width:1px;
	border-style:solid;
	padding:8px;
}
article{
	position:absolute;
	left:10%;
	top: 10px;
	height:auto;
	width:400px;
	border-color:#fff;
	border-width:1px;
	border-style:solid;
	padding:8px;
}

kralcx

A page element with relative positioning gives you the control to absolutely position children elements inside of it.

Can't see enough of your code to know for sure, however it could a positioning problem.

Kevin2

kralcx;1308347 wrote:
A page element with relative positioning gives you the control to absolutely position children elements inside of it.

html{
	min-height:100%;
	position:relative;
}

winthropite

try overflow-y: scroll in the right div along with html min-height:100%. Let me know if it works.

jedaisoul

For the left div, you have:

a) Used position: absolute and bottom:0 so it is using all the available height anyway. So there is nowhere to expand into.

b) Set overflow: hidden. That tells it NOT to put up a scroll bar when the content exceeds the available space. So it doesn't.

c) Set too many parameters. E.g. If you set top and bottom, it is pointless also setting height. You should only set two out of these three, depending upon how you want the div to respond to different display heights.

d) If you want to set top to 15%, it is inappropriate to set height to 100%! Set it to 85%. Or, if you want the transparent header to overlap the left div, set top: 0 and height 100% (or bottom: 0).

JCPerez

the simple solution to this problem is...

Put '<div style="clear:both;"></div>' after the 'div #right'

Hope to be helpfull

jedaisoul

clear:both does not work with position:absolute.