Posicionar div

[MarVinOlivieraS 0]

Bom dia, estou com uma dúvida relativa ao posicionamento de divs, tem uma div pai e mais 3 filhos, um grande e outros 2 com a metade da altura do outro, como nessa imagem:

 

como posso fazer isso em css???

 

desde já agradeço....

[MarVinOlivieraS 0]

Bem quebrando a cabeça resolvi, aparentemente, é que aqui onde estou o firefox tá desatualizado então não sei se deu certo em outros navegadores, mais eu fiz assim:

 

o style:

 

apoiado {
background-color:#009900
float: left;
font:Geneva, Arial, Helvetica, sans-serif;
font-size:16px;
text-align:center;
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
width:300px;
background-image:url(http://www.marvin.xpg.com.br/blog/backindicados.gif);
list-style:none;
padding: 0px;
	}
#apoiadoimg{

border: 1px solid #00C400;
list-style:none;
padding: 1px 1px 1px 1px;
height:140px;
width:140px;
display:inline;
 margin-left: 1px;
margin-right: 1px;
	margin-top: 4px;
	margin-bottom: 4px; 
	}
#moldura{
border: 1px solid #00C400;
width: 300px;
background: #A8FFA8;
padding: 2px 2px 2px 2px;
}

 

 

as divs:

 

 

 

<div id="apoiado">Eu Gosto</div>
<div id="moldura"><div id="apoiadoimg"><a class="home-link" href="http://www.blogdosjoguinhos.com/" target="blanck"><img src="http://users3.jabry.com/marvin7/joguinhos2.png"/></a></div>

<span style="position: absolute;">

<div id="apoiadoimg"><a target="_blanck" href="http://usuariocompulsivo.blogspot.com/"><img src="http://3.bp.blogspot.com/_mUT2piLt5H0/SGGbRpJJODI/AAAAAAAAGzA/xOUskYHTKt8/s00/banner-compulsivo.png"/></a>
</div><div id="apoiadoimg"> <a target="_blanck" href="http://www.apostilando.com/"><img width="120" src="http://apostilando.com/logo_layout_novo.gif" height="60"/></a></div></span></div>

se alguém vir um problema nesse código me ajude.

[GabrielFerrari 41]

Basicamente isso

 

<div id="geral">
	<div id="grande"></div>
	<div id="peq1"></div>
	<div id="peq2"></div>
</div>

<style type="text/css">
#geral{
	width: 800px;
	height: 600px;
}
#grande{
	width: 600px;
	height: 600px;
	background: red;
	position:relative;
	float: left;
}
#peq1{
	width: 200px;
	height: 300px;
	background: blue;
	position:relative;
	float:right;
}
#peq2{
	width: 200px;
	height: 300px;
	background: green;
	position:relative;
	float:right;
}
</style>

 

 

Você diz os tamanhos de cada um e a posição.

QUalquer dúvida só postar :)

 

 

 

Edit: Enquanto eu postava você resolver. rs

[Gui.BAR 0]

Acho que a #peq2 teria um clear: right; Thelon.

 

MarVinOlivieraS, o primeiro elemento do seu CSS ("apoiado") não tem definido o tipo de seletor (id "#" ou class ".")

[Thiago Retondar 18]

Acho que a #peq2 teria um clear: right; Thelon.

Para que? ø_Ø Não entendi...

 

Não precisava do position.

 

#geral{
        width: 800px;
        height: 600px;
}
#grande{
        width: 600px;
        height: 600px;
        background: red;
        float: left;
}
#peq1{
        width: 200px;
        height: 300px;
        background: blue;
        float:right;
}
#peq2{
        width: 200px;
        height: 300px;
        background: green;
        float:right;
}

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Gui.BAR 0]

Thiago, faça uma página com esse código, e então vai entender o clear. :)

Sem o clear a div #grande iria flutuar à esquerda, maaas abaixo da div #peq2, por isso devemos limpar o float à direita. (to meio confuso, confesso, mas é isso ou quase isso).

[Gui.BAR 0]

Não resisti e botei o código em prática:

Sem o clear

Com o clear

 

Isso acontece qnd a div do conteudo principal é menor que o tamanho da primeira div lateral.

 

Na verdade, a melhor solução pra isso é fazer uma div com um nome genérico, como sidebar :D , que englobe essas divs segundárias como peq1 e peq2.

[Thiago Retondar 18]

Sim, mas nesse caso, pela explicação dele a div#grande, ou "1", como consta no desenho, vai ser maior que os quadrados.

[Gui.BAR 0]

Esse desenho foi representativo. E acontece muito isso que eu citei (experiência própria).

 

UPDATE:

Li a explicação dele, e parece que realmente a altura do 1 vai ser igual a soma das alturas de 2 e 3. Mas pelomenos valeu minha dica, não? http://forum.imasters.com.br/public/style_emoticons/default/cry.gif

[Thiago Retondar 18]

Valeu sim. ;) Para quem não sabia, agora sabe. :D

[GabrielFerrari 41]

Esse desenho foi representativo. E acontece muito isso que eu citei (experiência própria).

 

UPDATE:

Li a explicação dele, e parece que realmente a altura do 1 vai ser igual a soma das alturas de 2 e 3. Mas pelomenos valeu minha dica, não? http://forum.imasters.com.br/public/style_emoticons/default/cry.gif

 

Pode ter certeza que valeu sim :P

É que eu fiz igual no desenho dele então nem passou na minha cabeça essa possibilidade

[MarVinOlivieraS 0]

Acho que a #peq2 teria um clear: right; Thelon.

 

MarVinOlivieraS, o primeiro elemento do seu CSS ("apoiado") não tem definido o tipo de seletor (id "#" ou class ".")

 

Na realidade foi um erro na hora de copiar mais ele (#) existe

[Thiago Retondar 18]

O problema foi resolvido?

[MarVinOlivieraS 0]

Infelismente não, aqui no meu trabalho onde o FFox é desatualizado até que aparece + ou - como tinha que se mais no IE lá em casas aparece todo desconfigurado. observe ai www.marvin7.com tá na sidebar. vleuuu

[Thiago Retondar 18]

Não achei nenhum erro aqui.

 

O código está meio sujo, está usando tabelas onde não precisava.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[MarVinOlivieraS 0]

eu estou utilizando só uma tabela para o layout pois não manjo muito de css, estou tentando utilizar uma tabela para organizar pois essas div tão dando muito trabalho. Obs.: observe na sidebar um local que tem "eu gosto", são dois locais um estou tentando usar tabela e outro estou tentando usar as div.

[Thiago Retondar 18]

Pode postar a imagem do erro e como queria que ficasse? Não estou conseguindo identificar. ;)

[MarVinOlivieraS 0]

O problema é esse ele aparece no ie:

 

[MarVinOlivieraS 0]

acho que vou desistir, tive testando vou fazer com table mesmo. vleuuu

[Gui.BAR 0]

De cara vi que você está usando a mesma ID (apoiado) em vários elementos diferentes. (seu código tá muito sujo, e tá difícil visualizar as coisas)