Publicado em 14 de abr.

Fixar duas divs nas laterais de outra?

Ae pessoal, to com uma div chamada layout q eh onde vai o conteudo do site, menu, flash, etc... quero colocar duas imagens, uma de cada lado do layout, pra que fique do lado de fora... pra que fique no body, mas colado na borda do layout... fiz as duas divs flutuante e flutuante 2, elas ficaram do lado, mas dependendo da resolucao elas ficam afastadas do layout, ou seja, nao estao grudando no layout... o que tenho q fazer para fixa-las no layout?

valeu

Besouro

body {

text-align:center;
background-image:url(tela.png); background-repeat:repeat;
background-color:#881212;
}

#layout {

width:760px;
margin:auto;
text-align:left;
background-image:url(tela2.png); background-repeat:repeat;
min-height:700px;
height:auto !important;
height:700px;

position:relative;
top: -10px;
margin-bottom:0px;

border-bottom-style:groove; border-bottom-color:#000000; border-bottom-width:medium; border-left-style:groove; border-left-color:#000000; border-left-width:medium; border-right-style:groove; border-right-color:#000000; border-right-width:medium;
}

#flutuante {
width:115px;
height:240px;
background-image:url(foto1.png);
position: fixed;
float:left;
top:350px;
left:5px;
}

#flutuante2 {
width:103px;
height:240px;
background-image:url(foto2.png);
position: fixed;
top:325px;
right:18px;
margin-left:100px;
}

Discussão (8)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Victor Cometti· 14 de abr.

você postou no lugar errado, isso é css, mas testa ae

text-align:center;
background-image:url(tela.png); background-repeat:repeat;
background-color:#fff;
}

div#layout {

width:760px;
margin:auto;
text-align:left;
min-height:700px;
height:700px,auto;
color: #000;
position:relative;
top: 10px;
margin-bottom:0px;
border-style:groove;
border-color:#000000;
border-width:medium;
}

div#flutuante {

width:115px;
height:240px;
background-image:url(foto1.png);
position: fixed;
float:left;
top:350px;
left:5px;
color: #aaa;
border: 1px solid #000000;
background-color: #1414D6;
}

div#flutuante2 {

width:103px;
height:240px;
background-image:url(foto2.png);
position: fixed;
top:325px;
right:18px;
margin-left:100px;
background-color: #1414D6;
border: 1px solid #000000;
float:right;
}
</style>

<body>
<div id='layout'>
<div id='flutuante'>

flutuante

</div>
<div id='flutuante2'>

flutuante 2

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

Besouro· 14 de abr.

ahh tah! foi mal!

nao funcionou! ela continua nao ficando fixa na layout! mas valeu!

Besouro

Jaime_Pinheiro· 14 de abr.

Programador PHP põe em table. Tableless é coisa de designer.

Besouro· 14 de abr.

hahaha

Besouro

João Batista Neto· 14 de abr.

Movido:

PHP http://forum.imasters.com.br/public/style_emoticons/default/seta.gif Webstandards: CSS / XML / XHTML / HTML

Evandro Oliveira· 14 de abr.

>
Programador PHP põe em table. Tableless é coisa de designer.

Boa sorte na sua caminhada. (y)

Besouro, tenta assim:

<body>
<img src="foto1.jpg" class="bgImg esq" alt="" />
<img src="foto2.jpg" class="bgImg dir" alt="" />
<div id="conteudo">bla bla bla</div>
</body>

* {

 margin: 0;
 padding; 0;
}

.bgimg {
 float: left;
 left-margin: 50%;
 position: relative;
}

.esq {
 left: -380px;
}

.dir {
 left: 380px;
}

#conteudo {
 border: medium groove #000;
 margin: 0 auto;
 width: 760px;
}

Jaime_Pinheiro· 14 de abr.

Besouro, tenta por numa table.

Thiago Retondar· 14 de abr.

>
Besouro, tenta por numa table.

Nesse caso é mais fácil fazer de acordo com os padrões.

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