Alinhando DIVs

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;
}

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. =]

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

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

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

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>

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

label {

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