Jump to content
Nuno Mateus

alinhar divs

Recommended Posts

Nuno Mateus

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 by yoda

Share this post


Link to post
Share on other sites
scrapy

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 by scrapy

Share this post


Link to post
Share on other sites
Nuno Mateus

OK. Deu certo.Muito obrigado pela a ajuda.

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

Atenciosamente,

Nuno Mateus

Share this post


Link to post
Share on other sites
ktunex

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.

;)

Share this post


Link to post
Share on other sites
HappyHippyHippo
<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 by HappyHippyHippo

IRC : sim, é algo que ainda existe >> #p@p

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.