Jump to content

Difficulty with DIV Height in

Felipe Ramalho

Recommended Posts

Html Source
<!DOCTYPE html><html>	<head>	<meta charset="utf-8">	<link rel="stylesheet" href="Style.css">	<title> W3Schools</title>	</head>	<body>	<div id="container">	<div id="business">Business</div>	<div id="menu">Menu</div>	<div id="mid">Mid</div>	<div id="foot">Foot</div>	</div>	</body></html>
Css Source
#container{	width:97%;	max-width:960px;	min-width:800px;	margin:1em auto;	background-color:#EBC79E;} #business{background-color:#8E6B23;}#menu{	width:15%; height:50%;	background-color:#238E68;}#mid{ width:50%; height:50%; background-color:#99CC32;}#foot{width:100%; height: 15%; background-color:#4A766E;}

Example Layout



Layout Desire! Using''%''
I do not know how to operate the'''' HEIGHT
I put all inside the div # container - And Still does not work.
I need an explanation or the W3Schools Explaining this Article


Link to comment
Share on other sites

The reason he asked what "work" means is that we don't know what you are expecting to be happening vs what is happening, since you didn't specify anything at all about what is happening.


But to get anything to show, you need to put some content in the divs, like text in between <p> or <h1> tags for example or else they will just stay collapsed, or you need to give explicit height in px's (min-height for example is common). % will work when there is a height to gauge the current elements height. If none of the elements have content, they have no height, so 15% of 0, is 0%.

Link to comment
Share on other sites

  • 1 month later...

Maybe something like...

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Percent Felipe</title><style>#container{width:97%;max-width:960px;min-width:800px;margin:1em auto;background-color:#EBC79E;} #business{height: 90px;background-color:#8E6B23;}#menu{width:15%; background-color:#238E68;margin:10px 0;height:300px;float:left;}#mid{ width:50%; height:300px; background-color:#99CC32;float:left;margin:10px 0 10px 10%;}#foot{width:100%; height: 50px; background-color:#4A766E;clear:both;}</style></head><body><div id="container"><div id="business">Business</div><div id="menu">Menu</div><div id="mid">Mid</div><div id="foot">Foot</div></div></body></html>

Or look at...



Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...