Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Luan Augusto

Como fazer div acompanhar crescimento

Por , em Desenvolvimento frontend

Recommended Posts

Luan Augusto    0

Luan Augusto
Postado

Se eu postei no lugar errado por favor pode mover esse é o meu primeiro tópico

 

Gente quero saber como fazer as divs acompanhar o mesmo crescimento, vou ter divs com tamanho maior e outras com tamanhos menores e queria que todas acompanhassem o crescimento da maior coluna. alguém pode me ajudar? A div menu não é para acompanhar o crescimento

 

ai os meus códigos:

 

 

estilo.css

 

    * { 
margin: 0; 
padding: 0; 
font: 10px verdana;
    }
    body { 
background: url(../images/background.jpg) fixed no-repeat top center;
-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
background-size: 100% auto;
width: 100%; 
height: 100%;
text-decoration: none;
text-align:center; 
   }
   #Container {
margin: 10px auto 5px auto;   
background: #f4f4f4;
       width:100%;
min-height: 100%;
   }
   #l-left {
background: #f4f4f4;
float:left;
width:13%;
padding-left:5px;
padding-right:5px;
text-align:left;
border:1px solid;
margin:2;
padding:2;
   }
   #l-right {
background: #f4f4f4;
float:left;
width:35%;
padding-left:5px;
padding-right:5px;
text-align:left;
border:1px solid;
margin:2;
padding:2;
   }
   #r-left {
background: #f4f4f4;
float:left;
width:35%;
padding-left:5px;
padding-right:5px;
text-align:left;
border:1px solid;
margin:2;
padding:2;
   }
   #r-right {
background: #f4f4f4;
float:left;
width:13%;
padding-left:5px;
padding-right:5px;
text-align:left;
border:1px solid;
margin:2;
padding:2;
   }

   h1 {
color: #000000;
font-size: 16px;
font-family: arial black, serif sans;

   }

#bar {
text-align: left;
padding-left:5px;
padding-right:5px;
position: fixed !important;
background: #778899;
color: #F4F4F4;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#778899'); /* IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#778899)); /* webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #778899); /* Firefox 3.6+ */
width: 100%;
height: 37px;
z-index: 300;
top:0px; padding:0;
left: 0px;
font-family: ARIAL;
}

 

index.php

 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
<head>
<title>Titulo</title>
<meta name="DC.title" content="titulo" />
<meta name="DC.subject" content="palavra chave" />
<meta name="DC.description" content="descroção" />
<meta name="DC.format" content="text/html" />
<meta name="DC.publisher" content="criador" />
<meta name="DC.language" content="pt" />
<meta http-equiv="Content-Type" content="text/html;" />
<link rel="stylesheet" href="./css/estilo.css" type="text/css">
</head>
<body>

<div id='bar'>
Menu será aqui
</div>
<br><br><br>
   <div id="Container">
           <div id="l-left">
Conteudo Coluna4
<br><br><br><br><br><br><br><br><br><br><br><br><br>
           </div>
           <div id="r-left">
Conteudo Coluna4
<br><br><br><br><br><br><br><br><br><br><br><br><br>
           </div>
           <div id="l-right">
Conteudo Coluna4
<br><br><br><br><br><br><br><br><br><br><br><br><br>
           </div>   

           <div id="r-right">
Conteudo Coluna4
<br><br><br><br><br><br><br><br><br><br><br><br><br>
           </div>  

   </div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

existem duas formas para fazer isso: dar um float: left; na div #Container ou dar um <div style="clear: both;"></div> antes do final da div #Container.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito