Alinhando DIVs

[vidaloukaig 0]

Galera, estou com um problema, é uma coisa boba mas já estou perdendo a cabeça... rs

Seguinte, o CSS está assim:

 

#acesso {
width:175px;
height:105px;
color:#000;
font-size:12px;
font-weight:bold;
}
.acesso_button {
margin-right:3px;
background:#CCC;
font-size:11px;
font-weight:bold;
border-color:#666;
}

 

E montei o HTML assim:

<div id="acesso">

   <form method="post" action="#">

   <div align="center">..:: Área do Cliente ::..</div>

   <div>Login:<div><input type="text" size="10"  /></div></div>
   <div>Senha:<div><input type="password" size="10" /></div></div>

   <div align="right"><button class="acesso_button" type="reset">Limpa</button><button class="acesso_button" type="submit">Entrar</button></div>

   </form>

   </div>

 

Só que a div quebra e vai para linha de baixo...

Como eu faço para a div do input não quebrar e não ir para linha de baixo?

 

Já tentei colocar height definido, float e white-space:nowrap também...

Já fiz várias coisas e o input sempre pula pra linha de baixo... <_<

 

Eu estou tentando colocar tudo na mesma linha e alinhado.

 

Só olhar no site que vocês vão entender: http://www.artefatoeventos.com.br

 

Desde já agradeço, valeu! =D

[Henrique Barcelos 290]

Mais um divmaníaco...

Cara, pra que tantas div's?

 

Faz o trem +/- assim:

<div id="acesso">
   <form method="post" action="#">
   <fieldset>
       <legend>..:: Área do Cliente ::..<legend>
       <label>Login:</label><input type="text" size="10" name="login"/>
       <label>Senha:</label><input type="text" size="10" name="senha"/>
   </fieldset>
   <div id="button_container"><button class="acesso_button" type="reset">Limpa</button><button class="acesso_button" type="submit">Entrar</button></div>
   </form>
</div>

 

No CSS:

 

#acesso {
width: 175px;
height: 105px;
}

#acesso fieldset {
border: none;
overflow: hidden;
}

#acesso label {
float: left;
clear: left;
width: 70px;
}

#acesso input {
float: left;
margin: 0 0 5px 5px;
width: 100px;
}

#button_container {
text-align: right;
}

 

[vidaloukaig 0]

Kkkkkkkkkkkkk =D

 

Estou aprendendo a usar, estou fazendo o site para ajudar um amigo. =)

Excelente explicação... mas agora estou com outra duvida... =D

 

Até que ficou legal, mas não era exatamente assim...

Estou tentando fazer várias modificações aqui, seguindo a estrutura da explicação, só que não consigo alinhar da maneira que eu quero... Hehehe =)

 

O resultado final é para ser básico, como se fosse uma tabela...

Só que não queria montar em tabela (apesar de ser mais fácil), exatamente pelo fato de estar querendo aprender outras formas, sem ser usando tabela.

 

Por exemplo, estou tentando alinhar, nesse esquema que você mandou, mas com o mesmo estilo de alinhamento de uma tabela:

 

Nome do lado e input do outro, de forma que os inputs fiquem um em baixo do outro, alinhados, e os nomes, também alinhados a outra margem... Expliquei bem? :D

 

Se não vou acabar deixando em tabela mesmo. =]

[Henrique Barcelos 290]

Posta um print de como ficou com a minha solução.

[- KbeçãO - 0]

o tamanho das div's é maior que a div principal??

c for, elas sempre vao passar pra baixo ...

[No Rain 0]

Para alinhar do jeito que procura, utiliza um parágrafo para cada linha e v-align para os inputs, alinhando o label com o input na posição vertical.

 

#form_login {
       width: 175px;
      margin: 0 auto;
}

#form_login legend { display:block; text-align: center; }

#form_login p {
       text-align:right;
       line-leight: /* dê um valor para o espaçamento entre os parágrafos */
}

#form_login label { /* caso queira alinhar os titulos à esquerda, deixando somente os inputs alinhados à direita um abaixo do outro */
       width: 70px;
       text-align: left;
       display:inline-block;
       *display:inline; /* hack para ie7 */
       zoom:1; /* hack para ie7 */
}

#acesso input {
       width: 100px;
       vertical-align:middle;
}

#button_container {
       text-align: right;
       margin-left: 10px;
}

 

/* note que eu retirei a div acesso. você não precisa dela já que o próprio form já se comporta como um bloco de conteúdo para esta finalidade */
<form id='form_contato'>
<legend>..:: Área do Cliente ::..</legend>
<p><label for='login'>Login:</label><input type='text' name='login' /></p>
<p><label for='email'>Senha:</label><input type='text' name='senha' /></p>
<p><button class="acesso_button" type="reset">Limpa</button><button class="acesso_button" type="submit">Entrar</button></p>
</form>

[Evandro Oliveira 331]

defina as <label>'s como inline-block e dê uma largura a elas.

 

label {
   display: inline-block;
   width: 200px;
}