divs dentro de divs

coxosclassic · April 9, 2014

Boas a todos,

Tou com um problema em relacao a posicionamento de divs

Aqui vai um exemplo:

html:

<html>
 <head>
<link rel="stylesheet" href="test.css" />
 </head>
 <body>
<div>
  <div class="container">
	<div class="content-a">

	</div>
	<div class="content-b">

	</div>
	<div class="content-c">

	</div>
  </div>
  <div class="footer">
  </div>
</div>
 </body>
</html>

css:

.container {
 width :100%;
 height: auto;
 position: relative;
}

.content-a {

 width: 100%;
 height: 200px;
 position: absolute;
}

.content-b {

 width: 100%;
 height: 100px;
 position: absolute;
}

.content-c {

 width: 100%;
 height: 300px;
 position: absolute;
}

.footer {
 width: 100%;
 height: 48px;
 position: relative;
}

O que eu pretendo é que as divs "content-*" fiquem dentro da div "container", e que o height dessa div container seja igual ao dos conteudos (content-*), e obviamente o footer fique por baixo do container...

ex: http://brunoperry.net/stuff/example.png

o que me esta a acontecer, é que a div container fica sem height nenhum, e o footer fica no topo por baixo das divs content...

Alguem me pode ajudar a resolver isto?

Cumps,

cc

I-NOZex · April 9, 2014

com posiçoes absolutas nao vai acontecer 😉

muda para relativo

e display: relative nao existe !

mas é possivel que precises talves depois de um display: inline-block

coxosclassic · April 9, 2014

ops... ja corrigi / editei o post 😉

o que eu pretendo é que as divs 'content' estejam umas por cima das outras, dai ter usado o position:absolute para cada uma delas. Agora o problema é que a div 'container' fica sem height nenhum, e o footer fica por cima das divs content...

obg!

Edited April 9, 2014 by coxosclassic

I-NOZex · April 9, 2014

bem, aqui entra um dos maiores dilemas 😉

http://imasters.com.br/front-end/css/por-que-height-100-nao-funciona-melhores2013/

lê esse artigo que eu considero excelente, e nao so vais entender o porque do erro, como provavelmente vais conseguir solucionar por ti 😉

HappyHippyHippo · April 9, 2014

<html>
 <head>
   <link rel="stylesheet" href="test.css" />
   <style type="text/css">
     html, body {
       padding: 0;
       margin: 0;
     }

     .clear {
       clear:both;
     }

     .container {
       width: 100%;
       height: 280px;
     }

     .content-a {
       top: 20px;
       left: 20px;
       width: calc(100% - 80px);
       height: 200px;
       position: absolute;
       border: 1px solid black;
       background-color: #FAFF9E;
     }

     .content-b {
       top: 40px;
       left: 40px;
       width: calc(100% - 80px);
       height: 200px;
       position: absolute;
       border: 1px solid black;
       background-color: #CBD4F7;
     }

     .content-c {
       top: 60px;
       left: 60px;
       width: calc(100% - 80px);
       height: 200px;
       position: absolute;
       border: 1px solid black;
       background-color: #F7CBCB;
     }

     .footer {
       width: calc(100% - 40px);
       height: 48px;
       position: relative;
       border: 1px solid black;
       margin: 0 20px;
     }
   </style>
 </head>
 <body>
   <div>
     <div class="container">
       <div class="content-a"></div>
       <div class="content-b"></div>
       <div class="content-c"></div>
     </div>
     <div class="clear"></div>
     <div class="footer"></div>
   </div>
 </body>
</html>

coxosclassic · April 10, 2014

Boas!

@I-NOZex: Muito obrigado pelo link, ainda nao tive tempo para o ler a 100%, mas tambem acho que me pode vir a dar muito jeito 👍

@HappyHippyHippo: Obrigado pelo snipet! mas o problema mantem-se... A ideia seria ter o height do container ajustado com o height dos contents (tipo um wrap-content), isto porque o conteudo dos contents é dinamico, dai eu nunca ter a certeza da altura real da 'coisa'.. Basicamente, estou lixado se meter um valor real no height do container, e se mudar o height para 'auto'... o problema mantem-se 😞

Mas muito obrigado pela dica 🙂

Cumps,

cc

Edited April 10, 2014 by coxosclassic

HappyHippyHippo · April 10, 2014

só estou a ver a resolver a coisa com o uso de javascript ...

coxosclassic · April 10, 2014

só estou a ver a resolver a coisa com o uso de javascript ...

... Tambem eu ... 😕

ske · April 10, 2014

ops... ja corrigi / editei o post 😉

o que eu pretendo é que as divs 'content' estejam umas por cima das outras, dai ter usado o position:absolute para cada uma delas. Agora o problema é que a div 'container' fica sem height nenhum, e o footer fica por cima das divs content...

obg!

a div container está sem height por que você definiu height:auto à ela.

Some todos os height's e substitua o valor total pelo "auto" do height(container), aplicando também um position:absolute. Ficando assim:

.container {
 width :100%;
 height: 600px;
 position: absolute;
}

E para o footer, adicione a tag div dele dentro da tag div container. Ficando assim:

<html>
 <head>
    <link rel="stylesheet" href="test.css" />
 </head>
 <body>
    <div>
	  <div class="container">
		    <div class="content-a">
		    </div>
		    <div class="content-b">
		    </div>
		    <div class="content-c">
		    </div>
		    <div class="footer">
		    </div>
	  </div>
    </div>
 </body>
</html>

E no CSS remova o position:relative.

coxosclassic · April 11, 2014

Ola ske,

Eu preciso que o height do 'container' seja mesmo auto, porque eu nunca irei saber (de ante-mao) qual o valor real de height dos 'contents', pois estes irao ter conteudo dinamico.. (logo as suas dimensoes serao dinamicas)

Eu queria evitar ao maximo o uso de javascript, visto isto ser uma operacao basica em qualquer ambiente de desenvolvimento de UI...

Mas pelo que parece, HTML e CSS nao dao essa hipotese, e la tive eu de reinventar a roda... (Peco desculpa se estarei a ofender o pessoal mais hardcore de html e css, mas isto esta a deixar-me mesmo frustado e continuo com a ideia de que me estara a escapar algo...)

Obrigado à mesma! 👍

cumps,

cc

I-NOZex · April 11, 2014

le o artigo que postei... acredita que vais entender o teu erro 🙂

btw, max e min width/height tambem sao 2 propriedades interessantes, just saying 😉

pac@crn · May 20, 2014

Se a ideia é colocar div dentro de div deverias definir isso mesmo no css.

Ou seja, deverias dar á primeira div um id e se as outras forem classes nomea-las juntamente ás divs. Se as colocares com id deverás tambem fazer o mesmo.

Exemplificando:

HTML:

<div id="content>
<div class="content-a>
....
</div>
</div>

CSS:

div#content{
....
}
div#content.content-a{
....
}

Espero ter ajudado. 🙂

divs dentro de divs

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information