Por que ele não posiciona as DIVs corretamente no navegador?

Question

Olá, senhores.

Dentro de um webform eu coloco duas DIVs que devem se apresentar à direita e à esquerda.

Dentro da DIV da direita, abro 3 DIVs que deveriam ser colocadas uma abaixo da outra, para montar um formulário. Com Labels à esquerda e os campos TextBox à direita.

Tal como se usássemos um <Table> com 3 linhas e duas colunas.

Mas ele não funciona!!!

Estou usando o IE-8 e ele faz uma lambança misturando o que deveria estar alinhado.

Onde está o erro?

    <form id="form1" runat="server">
    <div>
    
      <div style="position: relative; float:  left; top: 0px;  left: 0px; width: 30%;">
        <div>
            <h5>Listagem de Fontes Dinâmicas</h5>
            <asp:ListBox ID="lbxListagem" runat="server" Width="100%"></asp:ListBox>
            <div style="margin: 4px 0px 4px 0px">
                <a href="#">Editar</a>
            </div>
        </div>
      </div>
      <div style="position: relative; float: right; top: 0px; right: 0px; width: 68%;">
            <div style="position: relative; float:  left; top: 0px;  left: 0px; width: 100%;">
                <div style="position: relative; float:  left; top: 0px;  left: 0px; width: 15%;">
                    <h5 align="right">Edição...</h5>
                </div>
            </div>
            <div>
                <div style="position: relative; float: none;">
                    <div style="position: relative; float:  left; top: 0px;  left: 0px; width: 15%;">
                        <p align="right">Identificador:</p>
                    </div>
                    <div style="position: relative; float: right; top: 0px; right: 0px; width: 82%;">
                        <asp:TextBox ID="txtID" runat="server" Width="50%"></asp:TextBox>
                    </div>
                </div>
                <div style="position: relative; float:  none;">
                    <div style="position: relative; float:  left; top: 10px;  left: 0px; width: 15%;">
                        <p align="right">SQL:</p>
                    </div>
                    <div style="position: relative; float: right; top: 10px; right: 0px; width: 82%;">
                        <asp:TextBox ID="txtSQL" runat="server" Width="98%" 
                            Rows="15" TextMode="MultiLine"></asp:TextBox>
                    </div>
                </div>
                <div style="position: relative; float: none;">
                    <div style="position: relative; float:  left; top: 10px;  left: 0px; width: 15%;">
                        <p align="right">Parâmetros:</p>
                    </div>
                    <div style="position: relative; float: right; top: 10px; right: 0px; width: 82%;">
                        <asp:TextBox ID="txtParam" runat="server" Width="98%"></asp:TextBox>
                    </div>
                </div>
            </div>
      </div>    
    </div>
    </form>

---

Bom dia, bom trabalho.

Answer 1

Ricardo,

Na verdade você deveria mudar algumas coisas no teu código, as vezes fazer um arquivo .css a parte para dar uma organizada.

Answer 2

Como o amigo Cleber disse, use CSS para organizar melhor as páginas do seu site!

Veja este site: http://www.maujor.com/index.php

Tem MUITO conteúdo sobre o assunto.

Answer 3

Agradeço a atenção.

Verifiquei que a convivência entre as marcações <asp:...> e <div> e finalmente <p> não funcionam bem.

Parece que o parcador de parágrafo padrão distorce tudo. Ao invés disso, devemos usar o <asp:label>

Agradecido.

---

Bom dia, bom trabalho.

Answer 4

Ricardo, veja se é esse o código que voce precisa:

Inclua esse código na tag head da sua página:

<style type="text/css">
        .labelForm
        {
            display: block;
            float: left;
            width:10%;
        }
        .campoForm
        {
            float:right;
            width: 88%;
        }
        
        .clear
        {
            clear: both;
        }
        
    </style>

Depois coloque esse código do form:

<form id="form1" runat="server">
        <div style="float: left; width: 30%;">
            <div>
                <h5>
                    Listagem de Fontes Dinâmicas</h5>
                <asp:ListBox ID="lbxListagem" runat="server" Width="100%" />
                <div style="margin: 4px 0px 4px 0px">
                    <a href="#">Editar</a>
                </div>
            </div>
        </div>
        <div style="position: relative; float: right; top: 0px; right: 0px; width: 68%;">
            <h5>
                Edição...</h5>
            <div>
                <label for="txtID" class="labelForm">Identificador:</label>
                <asp:TextBox ID="txtID" runat="server" class="campoForm" />
                <br class="clear" />

                <label for="txtSQL" class="labelForm">SQL:</label>
                <asp:TextBox ID="txtSQL" runat="server" Rows="15" TextMode="MultiLine" class="campoForm" />
                <br class="clear" />

                <label for="txtSQL" class="labelForm">Parâmetros:</label>
                <asp:TextBox ID="txtParam" runat="server" class="campoForm" />
                <br class="clear" />
            </div>
        </div>
    </form>

Dicas:

1 - Não use tantas divs. No html as divs representam divisões (seções) no seu código. Nesse código:

<div style="position: relative; float:  left; top: 0px;  left: 0px; width: 15%;">
                        <p align="right">Identificador:</p>
                    </div>

Existe uma div que contém apenas um paragrafo. Essa não é uma seção do seu código. É parte de um campo de formulário. Veja que eu deixei o seu formulário inteiro dentro de uma unica div.

2 - Evite o uso do CSS inline(dentro da própria tag). Dê preferencia ao uso do css na tag style ou, melhor ainda, em um arquivo separado. Com o css em outro arquivo você pode reaproveitar o estilo de todos os formulários por exemplo.

Se você tiver mais alguma dúvida estou a disposição.

[]s

Guilherme

Answer 5

Ricardo, quanto ao uso da tag <p> e do <asp:Label> a função dos dois é diferente. O <p> é um elemento do tipo block. Por padrão, os elementos que vêm depois de uma tag block são posicionados abaixo dele. Portanto se você deseja que o <asp:TextBox> fique na frente o <p> não é o elemento correto além de semanticamente errado (você não tem um paragrafo ao lado do TextBox e sim um rotulo).

Já a tag <asp:Label> é um server control que gera um elemento HTML <label></label>, que é a tag correta. Porém, quando você não necessitar mudar as propriedades de algum elemento na sua página, prefira os controle html puros. Eles não são processados pelo runtime do ASP.NET e portanto economizam processamento contribuindo para a performance da sua página.

[]s

Guilherme