limited container

[coco243]

hy, I'm working to a site that looks in that way:http://damyg.webuda.com/tda2030a.htmlI have a top div.Then 3 floating divs, menu, container and the third div, all have the height property = 100%And a bottom div.The problem is when the container's content get bigger and exceeds the container, that theoreticaly is 100%, variable.I don't know where I'm wrong.I want that my container div to be variable with the content.I even diplaced the bottom container, butt nothingThe CSS code:

*{  margin: 0px;  padding: 0px; }#top {  width: 100%;  height:20%;  background-color:rgb(75,81,101); }#menu {   float: left;   width: 10%;   min-width: 100px;   height: 100%;   background-color:rgb(158,169,173);}#content {	float: left;	width: 80%;	height: 100%;	background-color: rgb(185,194,177);}#advertising {   float: left;   width: 10%;   height: 100%;   background-color:rgb(158,169,173);   }#down{   position:bottom;<!--the div stay allways down -->   width:100%;   height:15%;   background-color:rgb(75,81,101);    clear:both;<!--face delimitarea de elementul/divul anterior-->}

the Html code:

<div id="top66"><!-- Code 2.0 Romanian Top 66 START (damyg.webuda.com) --><script src="http://script.top66.ro/id-462860/7/code2.js" type="text/javascript"></script><a href="http://www.top66.ro" title="Promovare gratuita"><img src="http://images.top66.ro/vote/7.gif" alt="Electronica si microcontrolere Top66 Statistici" usemap="#Top66Vote" border="0"></a><!-- Code 2.0 Romanian Top 66 STOP (damyg.webuda.com) --></div></div><div id="menu"><p id="aligncenter"> <a href="acasa.html"> Acasa </a></p><p id="aligncenter"> <a href="tda2030a.html"> Proiect amplificator </a></p></div><div id="content"><div class="start"><p> Sa ne intram in mana! </p><p> Din acest articol vom invata sa construim un amplificator audio cu ajutorul circuitului integrat TDA2030A</p><p> Primul pas este sa facem rost de documentatia de specificatie <a href="http://www.datasheetcatalog.org/datasheet/stmicroelectronics/1459.pdf" target="_blank"> TDA2030A </a></p><p> Eu incerc sa pun in practica urmatorul circuit:</p></br></br></br><img src="tda2030asch.JPG" alt="Circuit"/><!--<p> Pentru a ne apropia putin de practica, si a intra putin in paine va trebui sa invatam ceva programe de editare ###### ar fi: OrCad, Protel, asa am facut si eu si am editat desenul de mai sus, si am ajuns aici:</br></br> --><!--<img src="tda2030aeditedsch.jpg" alt="schema editata"/> --></div></div><div id="advertising"> <p style="text-align:center">reclama ta aici</p> </div><div id="down"> <div id="trafic"><!--/Start trafic.ro/--><script type="text/javascript">t_rid="damygwebudacom";</script><script type="text/javascript" src="http://storage.trafic.ro/js/trafic.js"></script><noscript><p><a href="http://www.trafic.ro/?rid=damygwebudacom"><img alt="trafic ranking" src="http://log.trafic.ro/cgi-bin/pl.dll?rid=damygwebudacom" /></a></p><a href="http://www.trafic.ro">Statistici web</a> </noscript><!--/End trafic.ro/--></div></div>  </body></html>

If I remove the coments, my content exceeds the container.Some advice?Thank you.

[Ingolme]

A 100% height refers to 100% of the height of the closest ancestor that has its own defined height.This height is static, so the content can exceed that height. You'll also have trouble with that because an object with 100% height with margin, padding or other elements before it will always exceed the height of the window.If you want the content to make the container expand when it overflows, you'll have to set min-height rather than height to 100%.By the way, HTML comments don't work in CSS, this is likely to give errors and not work:

   position:bottom;<!--the div stay allways down -->

Change it for a CSS comment:

   position:bottom; /* the div stay allways down */

[coco243]

no, what you say doesn't working, sorryand what you say about comments works in php, I'm now using html.

[Dilated]

no, what you say doesn't working, sorryand what you say about comments works in php, I'm now using html.

I haven't looked especially closely at the CSS, but Ingholme is right, min-height should work, however, if you do use "min-height: 100%;", any children of that element will not be able to use any percentage height values because technically "min-height" does not qualify as an explicitly defined height.If the element has a dynamic height that isn't specifically set anywhere, a solution to your problem might be to use absolute positioning to stretch the element.This is what it would look like:

div#parent { position: relative; }div#child { position: absolute; top: 0; bottom: 0; }

That will stretch the #child div so that it is always as tall as #parent.edit: Also "bottom" is not a value for "position", you might be try to do something like, "position: absolute; bottom: 0;".

[coco243]

Let me see if I understood your advice.I have uploaded this code for css:

*{margins:0;padding:0;}#general{ <!--this is the parent div that icludes the another two, top and container.--> pozition:relative; top:0px; width:100%; min-height:100%; } #top{ position:absolute; top:0px; width:100%; height:50px; background-color:blue;}#container{ position:absolute; top:50px; width:100%; min-height:100%; background-color:green;}

This is the html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head> <link rel="stylesheet" type="text/css" href="index.css"/> <title> Test divs </title></head><body> <div id="general"> <div id="top"> <p>Top</p> </div> <div id="container" > <p> Container </p> </div> </div></body></html>

The rezult in Internet Explorer:Uploaded with ImageShack.usMy container div doesnt go down, neither the background doesn't go until the down of the page. Why?

[Dilated]

First of all, your CSS probably isn't getting parsed right and you have a few of mistakes:<!-- --> is an html comment, not a css comment. The comment you put next to the #general selector is probably ruining the parsing of the CSS. If you want to put a comment there it should look like: /* comment */ not <!-- comment -->You also misspelled "position" in the #general rule as "pozition", you also put "margins" instead of "margin" in the universal selector rule.Ignoring all that, the first thing that I notice that would cause a problem is the fact that you're using min-height on #general, when its parent (the body element) has no explicitly defined height.If you're going to use height percentages on direct descendants of body, you have to set an explicitly defined height on the element's parents (html & body). Also, when I spoke of absolute positioning in my previous post, I was presenting that as an alternative to using height percentages. Let me rewrite this for you, this is what I would do:

* { /* use "margin" instead of "margins" */  margin: 0;  padding: 0;}/* this is one of the most important parts, without this #general wont know how to calculate its height percentage */html, body { height: 100%; } #general {   /* you were on the right track with position: relative here, but you misspelled it. 	  setting the position to relative will ensure that this becomes the containing block for #container 	  don't need width because the element will automatically fit the entire width */  position: relative;  min-height: 100%;}#top {   /* don't need absolute positioning here because the height doesn't need to be stretched, also don't need width: 100%; 	  because non "shrinkwrapped" block elements automatically expand to fit the width of the parent element */  height: 50px;  background-color: blue;}#container {  position: absolute;  top: 50px; bottom: 0; /* this will stretch the element so it always goes down to the bottom */  left: 0; right: 0; /* use this instead of "width: 100%;", it's more flexible */  background-color: green;}

One problem is, #container won't cause #general's height to expand based on the content it contains. I'm not sure if you always want #container to take up the full remainder of height on the page, but if you don't it would be better to change the #container rule to:

#container { background-color: green; }

and remove the absolute positioning entirely.

[coco243]

I don't know what is wrong, I maded modificatons suggested by you and the result: http://damyg.webuda.com/ -verify that in explorer. What I see isn't a web page, #contaier is compressed arround his own text, I want for first that the green background to be contiued to the bottom of the page.Uploaded with ImageShack.usUploaded with ImageShack.usUploaded with ImageShack.usHere is an old tentative of mine for a site, but the webhost craseh and I don't have acces to my database. This one that I want to construct now I want to be as this: http://www.orasulmotru.lx.ro/I'm mad because I had suceeded that in the past, but I don't have any clue how to do that now.It may be to have problems with internet explorer?

[Dilated]

Works fine for me in Firefox, haven't tried IE. Copy this verbatim:

<style>* { /* use "margin" instead of "margins" */  margin: 0;  padding: 0;}/* this is one of the most important parts, without this #general wont know how to calculate its height percentage */html, body { height: 100%; }#general {  /* you were on the right track with position: relative here, but you misspelled it.      setting the position to relative will ensure that this becomes the containing block for #container      don't need width because the element will automatically fit the entire width */  position: relative;  min-height: 100%;}#top {  /* don't need absolute positioning here because the height doesn't need to be stretched, also don't need width: 100%;      because non "shrinkwrapped" block elements automatically expand to fit the width of the parent element */  height: 50px;  background-color: blue;}#container {  position: absolute;  top: 50px; bottom: 0; /* this will stretch the element so it always goes down to the bottom */  left: 0; right: 0; /* use this instead of "width: 100%;", it's more flexible */  background-color: green;}/* OR:  #container { background-color: green; } */</style><div id="general">  <div id="top">test</div>  <div id="container">test</div></div>

[coco243]

I'll have to study, it doesn't work, tahnks.

[dsonesuk]

there are several ways to do this, but you should avoid using position as much as possible. In this method below no positioning is used, and with the side panels i used the background color of body to give impresssion that they extend to bottom, i had to used conditions for different browsers IE6 - 7, and opera.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">*{  margin: 0px;  padding: 0px;}html, body {height:100%;background-color:rgb(158,169,173)}p{margin:0.8em 0;}#top {  width: 100%;  height:20%;  background-color:rgb(75,81,101);  }.start {min-height:100%; overflow:hidden; margin:0 12px;}#menu {   float: left;   width: 10%;   min-width: 100px;   min-height: 65%;   height: auto;   background-color:rgb(158,169,173);}#content{	margin:0 10%;	height: auto;	min-height:65%;	background-color: rgb(185,194,177);}#advertising {   float: right;   width: 10%;   min-height: 65%;   background-color:rgb(158,169,173);  height: auto;}#down{   /*position:bottom;the div stay allways down */   width:100%;   height:15%;   background-color:rgb(75,81,101);   clear:both;/*face delimitarea de elementul/divulanterior*/	margin:-0.8em auto 0 auto;}/* Opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #down  {margin: 0 auto;} }}</style><!--[if lte IE 7]><style type='text/css'>#down  {margin: 0 auto;}</style><![endif]--><!--[if IE 6]><style type='text/css'>#menu, #content, #advertising {height:65%}</style><![endif]--></head><body><div id="top"><!-- Code 2.0 Romanian Top 66 START (damyg.webuda.com) --><script src="http://script.top66.ro/id-462860/7/code2.js" type="text/javascript"></script><a href="http://www.top66.ro" title="Promovare gratuita"><img src="http://images.top66.ro/vote/7.gif" alt="Electronica si microcontrolere Top66 Statistici"usemap="#Top66Vote" border="0"></a><!-- Code 2.0 Romanian Top 66 STOP (damyg.webuda.com) --></div><!-- END TOP --><div id="menu"><p id="aligncenter"> <a href="acasa.html"> Acasa </a></p><p id="aligncenter"> <a href="tda2030a.html"> Proiect amplificator </a></p></div><!-- END MENU --><div id="advertising"><p style="text-align:center">reclama ta aici</p></div><!-- END ADVERTISING --><div id="content"><div class="start"><p> Sa ne intram in mana! </p><p> Din acest articol vom invata sa construim un amplificator audio cu ajutorul circuitului integrat TDA2030A</p><p> Primul pas este sa facem rost de documentatia de specificatie <a href="http://www.datasheetcatalog.org/datasheet/stmicroelectronics/1459.pdf"target="_blank"> TDA2030A </a></p><p> Eu incerc sa pun in practica urmatorul circuit:</p></br></br></br><img src="tda2030asch.JPG" alt="Circuit"/><!--<p> Pentru a ne apropia putin de practica, si a intra putin in paine va trebui sa invatam ceva programe de editare ###### ar fi: OrCad, Protel, asa am facutsi eu si am editat desenul de mai sus, si am ajuns aici:</p></br></br> --><!--<img src="tda2030aeditedsch.jpg" alt="schema editata"/> --></div><!-- END START --></div><!-- END CONTENT --><div id="down"><div id="trafic"><!--/Start trafic.ro/--><script type="text/javascript">t_rid="damygwebudacom";</script><script type="text/javascript" src="http://storage.trafic.ro/js/trafic.js"></script><noscript><p><a href="http://www.trafic.ro/?rid=damygwebudacom"><img alt="trafic ranking"src="http://log.trafic.ro/cgi-bin/pl.dll?rid=damygwebudacom" /></a></p><a href="http://www.trafic.ro">Statistici web</a></noscript><!--/End trafic.ro/--></div></div><!-- END DOWN -->  </body></html></body></html>

[coco243]

Thanks dsonesuk, you hepled me a lot. But first I want to ask if the repeted </body> </html> at the end of your code posted are just mistakes, or they have a specific functionality. Now, I tested your code and I was glad to see that it's works, but when I tried to split your code in a html and a css I didn't succeeded, and I don't know where is the wrong thing. Here is my html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="ind1.css"/> <title> Let's do electronics </title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><!--[if lte IE 7]><style type='text/css'>#down {margin: 0 auto;}</style><![endif]--><!--[if IE 6]><style type='text/css'>#menu, #content, #advertising {height:65%}</style><![endif]--></head><body><div id="top"><!--<script language="JavaScript" src="http://www.counter160.com/js.js?img=15"></script><br><a href="http://www.000webhost.com"><img src="http://www.counter160.com/images/15/left.png" alt="Free web hosting" border="0" align="texttop"></a><a href="http://www.hosting24.com"><img alt="Web hosting" src="http://www.counter160.com/images/15/right.png" border="0" align="texttop"></a> --><!-- Code 2.0 Romanian Top 66 START (damyg.webuda.com) --><script src="http://script.top66.ro/id-462860/7/code2.js" type="text/javascript"></script><a href="http://www.top66.ro" title="Promovare gratuita"><img src="http://images.top66.ro/vote/7.gif" alt="Electronica si microcontrolere Top66 Statistici" usemap="#Top66Vote" border="0"></a><!-- Code 2.0 Romanian Top 66 STOP (damyg.webuda.com) --></div> <!-- END TOP --><div id="menu"><p id="aligncenter"> <a href="acasa.html"> Acasa </a></p><p id="aligncenter"> <a href="tda2030a.html"> Proiect amplificator </a></p></div> <!-- END MENU --><div id="content"><div class="start"> <p>Bun venit pe site-ul meu de electronica!</p><p>Construiesc acest site pentru persoanele ce vor sa invete cu adevarat electronica. Sa o simta.</p> <p>Acest site se adreseaza incepatorilor care vor sa dezlege tainele electronicii, este bazat pe experienta mea si se va dezvolta pe zi ce trece.Am incredere ca impreuna vom deveni buni ingineri, buni electronisti si vom castiga o paine frumoasa din aceasta stiinta care ne inconjoara</br>Bun venit </p></div> <!-- END START --></div> <!-- END CONTENT --><div id="advertising"> <p style="text-align:center">reclama ta aici</p> </div> <!-- END ADVERTISING --><div id="down"> <div id="trafic"><!--/Start trafic.ro/--><script type="text/javascript">t_rid="damygwebudacom";</script><script type="text/javascript" src="http://storage.trafic.ro/js/trafic.js"></script><noscript><p><a href="http://www.trafic.ro/?rid=damygwebudacom"><img alt="trafic ranking" src="http://log.trafic.ro/cgi-bin/pl.dll?rid=damygwebudacom" /></a></p><a href="http://www.trafic.ro">Statistici web</a> </noscript><!--/End trafic.ro/--></div></div> <!-- END DOWN --></body></html>

And css:

*{ margin: 0px; padding: 0px;}html, body { height:100%; background-color:orange;<!--rgb(158,169,173)-->}p { margin:0.8em 0;}#top { width: 100%; height: 20%; background-color:silver;<!--rgb(75,81,101);-->}.start { min-height:100%; background-color:brown;<!--rgb(185,194,177);--> overflow:hidden; margin:0 12px;}#menu { float: left; width:10%; min-width:100px; min-height:65%; height: auto; background-color:yellow;<!--rgb(158,169,173);-->}#content { margin: 0 10%; height: auto; min-height: 65%; background-color:blue;<!-- rgb(185,194,177);-->}#advertising { float: right; width: 10%; min-height: 65%; background-color: red; height: auto;}#down{ width:100%; height:15%; background-color:green;<!--rgb(75,81,101);--> clear:both; margin:-0.8em auto 0 auto;}

I modified the div's colors to a better distinguish view, and I had observed that problems are at the right pannel ( advertising ) it is placed down, after the content div.Look:Uploaded with ImageShack.usmy url adress is the same

[dsonesuk]

no the extra </html> or </body> should not be there, sorry, the reason your layout is not working is because you have advertising div BELOW content div, should be above.just tried to validate your page, </br> should be <br />, you are using multiple id reference for paragraphs, when they should be unique, for multiple references, you would use classes, can't use target in strict doc-type (well you can, but you have to cheat by using javascript to pass validation).

[coco243]

Man, thank you, you were right, that's was the buba, I woldn't thinked that the order does matter, wat is the logic? As a observaton, my div content it's a bit lower than menu and advertising, where is the problem. Anyway I want to mention that you help me a lot, I hadn't time to understand your code, but is a verry god first step. Thank you.

[thescientist]

Man, thank you, you were right, that's was the buba, I woldn't thinked that the order does matter, wat is the logic? As a observaton, my div content it's a bit lower than menu and advertising, where is the problem. Anyway I want to mention that you help me a lot, I hadn't time to understand your code, but is a verry god first step. Thank you.

the order does matter, and the logic is just a matter of knowledge and understanding. a typical webpage requires this basic structure:

<!DTD><html><head>  <title>Title</title></head><body>  <p>Text</p></body></html>

read the tutorials for a better understanding of the basics.http://www.w3schools.com/html/default.asp

[coco243]

what I have asked in this topic it's not explained in those tutorials, to be capable to make a web page layout you need strong experience or discussions on forums.Anyway I sill have a question, my content div is a litle lower that the menu and advertising divs, how I do to repair that?

[dsonesuk]

what I have asked in this topic it's not explained in those tutorials, to be capable to make a web page layout you need strong experience or discussions on forums.Anyway I sill have a question, my content div is a litle lower that the menu and advertising divs, how I do to repair that?

(1) The two side panel, are float elements, the content container is not. The float elements will not float above the bottom edge of a non-floated element, But the non-floated element will occupy the same area of the floated elements above it, thats why the content area was able to be next to the menu side panel (as it was above it), but the advertising panel was not (was below bottom edge of content).(2) The problem you are getting is caused by collapsible margins, because the content, and start container has 0px top margin, but the paragraph tag does (0.8em), the higher margin will take precedence, the top of text will butt up to the top edge of start container, and the margin will go beyond the top edge of of content also forcing these containers down by paragraphs set top margin.Fix:for the start container use:use overflow: hidden;ORpadding-top: 1px;ORborder: 1px solid brown;

[coco243]

Ok, I used padding-top: 1px; after that, I have this effect in mozzila:Uploaded with ImageShack.usI think that the bottom ( down ) div moved up, making trouble at floating pannels, and had let the body descovered. it sees the orange color of the body.In explorer I have this minor problem:Uploaded with ImageShack.usThe float pannels are spread by the content div letting to see the background body collorCan help me with this?It is because of -0.8 em margin of down div?

[dsonesuk]

yes because the content was moved down by the paragraph margin, i had to use -0.8em to position correctly, now it has moved up you can reset the down margin to margin: 0 auto;The IE problem seems to be an issue with IE6 only, but i can't figure out a work around for this yet, but are you really bothered about IE6, it is only just surviving usage still.

[coco243]

Man I am very satisfied of what I have for now, I will study the code to fully understand it and if I'll have questions I will ask. Thank you very much for your time.