[CSS] Aumentar tamanho de uma caixa!

obrigado!

Só mais uma ajuda! quando o texto é grande a caixa não está a redimensionar tendo em conta o texto, acontece que o texto sai para fora da caixa! Existe alguma solução para resolver isso?

Cumprimentos
 
Olá!
Provavelmente tens o height com valor definido, por exemplo 300px. Assim, a caixa ficará igual.
Creio que se ao invés desse comando usares min-height: 300px; a caixa vai sempre ter um mínimo tamanho mas, quando o texto excede, a própria ajusta conforme o texto.
Try it.

Abraço
 
Boas,

Obrigado pela ajuda novamente, tentei utilizar a opção que referis-te mas o que acontece é que ele redimensiona mas na horizontal, não na vertical como pretendo! Posso estar a utilizar o comando no sitio errado!


Código: 
#main{
    margin:0 auto;
    position:relative;
    min-width:1000px;
}
O codigo da css todo é o seguinte:

Código: 
    /* Simple page reset */
    margin:0;
    padding:0;
}

body{
    /* Setting default text color, background and a font stack */
    color:#cccccc;
    font-size:0.825em;
    background-color: #1e2428;
    font-family:Arial, Helvetica, sans-serif;
}

.tabContainer{
    /* The UL */
    float:right;
    padding-right:13px;
}

#contentHolder{
    background-color:#EEEEEE;
    border:2px solid #FFFFFF;
    height:300px;
    margin:20px;
    
    color:#444444;
    padding:15px;
}

#tabContent{
    background-color:#333;
    border:1px solid #444;
    margin-top:-15px;
    width:100%;
}

#tabContent, .tabContainer li a,#contentHolder{
    -webkit-box-shadow:0 0 2px black;
    -moz-box-shadow:0 0 2px black;
    box-shadow:0 0 2px black;
}

.tabContainer li{
    /* This will arrange the LI-s next to each other */
    display:inline;
}

.tabContainer li a,.tabContainer li a:visited{
    /* Styling the hyperlinks of the tabs as colorful buttons */
    
    float:left;
    font-size:18px;
    
    /* display:block allows for additinal CSS rules to take effect, such as paddings: */
    display:block;
    
    padding:7px 16px 1px;
    margin:4px 5px;
    height:29px;
    
    /* Giving positioning */
    position:relative;
    
    /* CSS3 text-shadow */
    text-shadow:1px 1px 1px #CCCCCC;
}

#overLine{
    /* The line above the active button. */
    position:absolute;

    height:1px;
    background-color:white;
    width:90px;
    
    float:left;
    left:1px;
    top:-5px;
    overflow:hidden;
}

#main{
    margin:0 auto;
    position:relative;
    min-width:1000px;
}


ul .left{
    /* The left span in the hyperlink */
    
    height:37px;
    left:0;
    position:absolute;
    top:0;
    width:10px;
}

ul .right{
    /* The right span in the hyperlink */
    
    height:37px;
    right:0;
    position:absolute;
    top:0;
    width:10px;
}

/* Styling the colors individually: */

ul a.green{    background:url(img/green_mid.png) repeat-x top center;    color:#24570f;}
ul a.green span.left{ background:url(img/green_left.png) no-repeat left top;}
ul a.green span.right{ background:url(img/green_right.png) no-repeat right top;}


ul a.blue{    background:url(img/blue_mid.png) repeat-x top center;    color:#03426e;}
ul a.blue span.left{ background:url(img/blue_left.png) no-repeat left top;}
ul a.blue span.right{ background:url(img/blue_right.png) no-repeat right top;}


ul a.orange{    background:url(img/orange_mid.png) repeat-x top center;    color:#724104;}
ul a.orange span.left{ background:url(img/orange_left.png) no-repeat left top;}
ul a.orange span.right{ background:url(img/orange_right.png) no-repeat right top;}


ul a.red{    background:url(img/red_mid.png) repeat-x top center;    color:#6f0100;}
ul a.red span.left{ background:url(img/red_left.png) no-repeat left top;}
ul a.red span.right{ background:url(img/red_right.png) no-repeat right top;}


/* The hover states: */
ul a:hover{    background-position:bottom center; text-decoration:none;}
ul a:hover span.left{ background-position:left bottom;}
ul a:hover span.right{ background-position:right bottom;}

.preloader{
    display:block;
    margin:120px auto;
}

.clear{
    /* Old-school clear fix hack to clear the floats: */
    clear:both;
    height:1px;
    overflow:hidden;
}

/* The styles below are only necessary for the styling of the demo page: */

h1{
    background:#121b21;
    border-bottom:1px solid black;
    font-size:1.5em;
    font-weight:normal;
    margin-bottom:15px;
    padding:15px;
    text-align:center;
}

h2 {
    font-size:0.9em;
    font-weight:normal;
    padding-right:40px;
    position:relative;
    right:0;
    text-align:right;
    text-transform:uppercase;
    top:-48px;
}

a, a:visited {
    color:#0196e3;
    text-decoration:none;
    outline:none;
}

a:hover{
    text-decoration:underline;
}

p.tutInfo{
    /* The tutorial info on the bottom of the page */
    padding:10px 0;
    text-align:center;
    position:fixed;
    bottom:0px;
    background:#121b21;
    border-top:1px solid black;
    width:100%;
}

h1,h2,p.tutInfo{
    font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

Muito obrigado novamente
Cumprimentos
 
width é para a horizontal, height é para a vertical (tal como estava a referir-me, quando falaste no texto estar a ultrapassar a linha).
Não sei qual é a div, mas provavelmente é a #contentHolder. Se for, tenta mudar para:
Código: 
#contentHolder{
    background-color:#EEEEEE;
    border:2px solid #FFFFFF;
    min-height:300px;
    margin:20px; 
    color:#444444;
    padding:15px;
}
Abraço
 
Última edição:
Obrigado pelas dicas,

Ainda não tive oportunidade de testar, mas quando o conseguir fazer deixo aqui o ponto de situação.

Obrigado a todos novamente.

Cumprimentos
 
Inicie sessão ou registe-se para poder participar.
Back
Topo