Limited DIV container

damy · #1 21-Nov-2010, 13:46

I'm working at a site that have the following structure:

A header div on top.

Three flowing divs: a menu div on left, a container in midle and another div on right

At the bottom of the site another div.

My problem is when the content of the container div exceeds.
My container div has height:100%.
I want that my container to be variable with the content, but I don't know how to do that.

If somebody can help me I will be gratefull.
Thanks.

My css code:

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;
   min-height: 100%;
   background-color:rgb(158,169,173);
}


#content {
    float: left;
    width: 80%;
    min-height: 100%;
    background-color: rgb(185,194,177);
}

#advertising {
   float: left;
   width: 10%;
   min-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;<!--makes the delimitation between the anterior 

element/div-->
}


#paracenter {
 font-size: 40px;
 text-align:center;
 color:green;
 
  }

.position {

position:relative;
top:60px;
text-align:center;
color:green;
font-size:40px; 

}  

#top66 {

position:absolute;
top:20px;
left:1150px;
}

#counter {

position:absolute;
top:0px;
left:30px
}



#trafic {
  position:relative;
  top:5px;
  left:600px
}

#alignCenter{

   text-align:center;
}


.center{
position:relative;
margin-left:40;
margin-right:auto;
align:center;<!-- to align the div on center -->
width:90%;
text-indent:20px;
top: 120px;


}

#mj{
position:relative;
top:300px;
text-align:center;
font-size:30px;
color:red;

}


.start{

position:relative;
top: 80px;
text-indent:30px;
align:center;
margin-left:40px;
margin-right:auto;

}

and the html code

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

<head>
<link rel="stylesheet" type="text/css" href="ind.css"/> 
<title> Proiect Amplificator </title>
</head>

<body>



<div id="top">
<div id="counter">
<p> <!-- START OF HIT COUNTER CODE -->
<br><script language="JavaScript" src="http://www.counter160.com/js.js?img=15"></script><br><a href="http://www.***.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>
<!-- END OF HIT COUNTER CODE --> </p>
</div>




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

hack31340 · #2 27-Aug-2011, 09:03

I'm slightly confused but I feel bad that you have 200 some views and no replys..

Do you want height:auto; for the center div?

PhilComforthost · #3 08-Sep-2011, 11:48

Hi, yes, i'm bit confused too...

A Container Div usually 'contains' the whole of the website code inside the body, e.g.:

HTML Code:


<body>
    <div id="container">
          ....
          ....
    </div>
</body>

And you have no Container Div - BUT, if you mean your Content Div then yes, as the post above mentions, change:

min-height: 100%; to height: auto;

hack31340 · #4 25-Jan-2012, 07:44

I hope I dont get in "trouble" for reviving a old thread, but phil cant accept PM's so I guess I will just try

Hey, Im sure you already found out the answer and sorry it took me super long to reply, this goes to my gmail and I never check that ha.

but you were trying to make the div for content auto adjust for content. so when you add more things its gets larger or if you dont have as much its smaller.

what you want is overflow:hidden.

that will do it. Good luck with all the web design!

hbg5ty · #5 10-Feb-2012, 01:42

thank you for sharing

arunnayak · #6 13-Jun-2012, 23:23

first of all the container should look like this

HTML Code:


<body> <div id="container"> .... .... </div> </body>

The easiest way to see the problem is to look at this in firefox.
thanks

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Rate This Thread
Rate This Thread:

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Limited file size....	lament	Apache Web Server Forum	2	31-May-2004 13:35
[function] Show limited words of a string / text	JdS	PHP Code Library	0	05-Jun-2003 09:25

Limited DIV container

Re: Limited DIV container

Re: Limited DIV container

Re: Limited DIV container

Re: Limited DIV container

Re: Limited DIV container