alinhar divs

Nuno Mateus · March 8, 2013 at 07:49 PM

pessoal estou aqui com um problema de iniciante que não estou a conseguir resolver,por isso peço a vossa ajuda.

É o seguinte: queria colocar as duas divs uma ao lado da outra, mas alinhadas. O que acontece é que ao por float elas não ficam alinhadas.

Já agora se puser só o float numa div a outra não devia ficar logo ao lado da outra, é que não resulta por isso puz float left numa e float right noutra.

as divs têm a seguinte formatação;

  .div7
  {
 margin-left:20px;
 width:500px;
 height:700px;
 border:8px groove purple;
 color:black;
 background-color:yellow;
 font-size: 20px;
 float:left;


.div8
  {

 width:500px;
 height:700px;
 border:8px groove purple;
 color:black;
 background-color:yellow;
 font-size: 20px;
 margin:40px;
 float:right;
}

Edited March 8, 2013 at 10:10 PM by yoda

scrapy · March 8, 2013 at 08:20 PM

na parte do html, nao podes fazer uma tabela com bordas invisíveis ? Penso que seja o método mais correcto de fazer.

<!doctype html>

<html>
<body>

<table>
<tr>
<td><div id="div7">codigo div7...</div></td>
<td><div id="div8">codigo div8...</td>
</tr>
</table>



</body>
</html>

#div7 {
margin-left:20px;
width:500px;
height:700px;
border:8px groove purple;
color:black;
background-color:yellow;
font-size: 20px;
}

#div8 {

width:500px;
height:700px;
border:8px groove purple;
color:black;
background-color:yellow;
font-size: 20px;
margin:40px;
}

Edited March 8, 2013 at 08:33 PM by scrapy

Nuno Mateus · March 8, 2013 at 11:41 PM

OK. Deu certo.Muito obrigado pela a ajuda.

Desculpem a minha curiosidade mas ,será a única maneira de fazê-lo?

Atenciosamente,

Nuno Mateus

ktunex · March 13, 2013 at 10:52 PM

crias uma div geral com a largura total que as duas divs ocupam, as duas divs ficam dentro destas. depois na div do lado esquerdo metes float left. e na div do lado direito float right. atençao, a largura total das duas divs nao deve ultrapassar a largura da div geral.

😉

HappyHippyHippo · March 13, 2013 at 11:48 PM

<html>
   <head>
     <style type="text/css">
       html, body
       {
         margin: 0;
         padding: 0;
       }
       .wrapper
       {
         width: 600px;
         padding: 100px 0;
         margin: 0 auto;
       }
       .left
       {
         float: left;
         width: 200px;
         height: 200px;
         background-color: #faa;
       }
       .right
       {
         float: right;
         width: 400px;
         height: 400px;
         background-color: #aaf;
       }
     </style>
   </head>
   <body>
     <div class="wrapper">
       <div class="left"></div>
       <div class="right"></div>
     </div>
   </body>
</html>

Edited March 13, 2013 at 11:49 PM by HappyHippyHippo

Nuno Mateus · March 14, 2013 at 06:33 PM

Muitíssimo obrigado, a todos pela a ajuda.

Atenciosamente,

Nuno Mateus

ktunex · March 15, 2013 at 07:46 PM

parece que resultou ne? 🙂

Sign In

alinhar divs

Recommended Posts

Nuno Mateus

scrapy

Nuno Mateus

ktunex

HappyHippyHippo

Nuno Mateus

ktunex

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information