CODEWITHSUNDEEP
htmlmargin
Chrix1387
Chrix1387

Reputation: 119

Float div doesn't respect margin-top

I've a got a problem that I'm sure you would be surely able to fix.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AggiuntaUtente.aspx.cs" Inherits="LogIn.AggiuntaUtente" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JDoc - Inserimento Utente</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="Css/qsf.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>
        <form id="form1" runat="server">
            <div style="width: 40%; margin-left: 7%; margin-bottom: 5px;">
                <fieldset>
                    <legend style="color: Navy">Anagrafica Utente</legend>
                    <label for="txtNome" class="qsfBodyTextLinkButtonNoHand">Nome</label>
                    <asp:TextBox runat="server" ID="txtNome" Style="margin-bottom: 5px; margin-left: 100px; width: 300px" /><br />
                    <label for="txtCognome" class="qsfBodyTextLinkButtonNoHand">Cognome</label>
                    <asp:TextBox runat="server" ID="txtCognome" Style="margin-left: 80px; width: 300px" />
                    <div class="qsfCellaSeparatore" style="margin-top: 15px;"></div>
                    <div style="text-align: center; margin-top: 20px;">
                        <asp:Label runat="server" Text="L'Utente effettua il ripristino del protocollo in Emergenza?" CssClass="qsfBodyTextLinkButtonNoHand" />
                    </div>
                    <asp:RadioButtonList ID="chkProtoEmergenza" runat="server" RepeatDirection="Horizontal" TextAlign="Right" align="center" Font-Size="Small">
                        <asp:ListItem Selected="True" Value="0" Text="No" />
                        <asp:ListItem Value="1" Text="Si" />
                    </asp:RadioButtonList>
                </fieldset>
            </div>
            <div style="width: 40%; margin-left: 7%;">
                <fieldset>
                    <legend style="color: Navy">Contatti</legend>
                    <label for="txtEmail" class="qsfBodyTextLinkButtonNoHand">Email</label>
                    <asp:TextBox runat="server" ID="txtEmail" Style="margin-bottom: 5px; margin-left: 100px; width: 300px" /><br />
                    <label for="txtTelefono" class="qsfBodyTextLinkButtonNoHand">Telefono Uff.</label>
                    <asp:TextBox runat="server" ID="txtTelefono" Style="margin-bottom: 5px; margin-left: 58px; width: 300px" /><br />
                    <label for="txtCellulare" class="qsfBodyTextLinkButtonNoHand">Cellulare</label>
                    <asp:TextBox runat="server" ID="txtCellulare" Style="margin-bottom: 5px; margin-left: 84px; width: 300px" /><br />
                    <label for="txtFax" class="qsfBodyTextLinkButtonNoHand">Fax</label>
                    <asp:TextBox runat="server" ID="txtFax" Style="margin-bottom: 5px; margin-left: 110px; width: 300px" />
                </fieldset>
            </div>
            <div style="width: 40%; margin-right: 7%; float:right;">
                <fieldset>
                    <legend style="color: Navy">Anagrafica di Sistema</legend>
                    <label for="txtUser" class="qsfBodyTextLinkButtonNoHand">User</label>
                    <asp:TextBox runat="server" ID="TextBox1" Style="margin-bottom: 5px; margin-left: 104px; width: 300px" /><br />
                    <label for="txtPassword" class="qsfBodyTextLinkButtonNoHand">Password</label>
                    <asp:TextBox runat="server" ID="txtPassword" Style="margin-bottom: 5px; margin-left: 77px; width: 300px" /><br />
                    <div class="qsfCellaSeparatore" style="margin-top: 15px;"></div>
                    <div style="margin-top: 20px;">
                        <asp:Label ID="Label1" runat="server" Text="Utente di Dominio" CssClass="qsfBodyTextLinkButtonNoHand" />
                        <asp:RadioButtonList ID="chkDominio" runat="server" RepeatDirection="Horizontal" TextAlign="Right" Font-Size="Small">
                            <asp:ListItem Selected="True" Value="0" Text="No" />
                            <asp:ListItem Value="1" Text="Si" />
                        </asp:RadioButtonList>
                        <asp:Label ID="Label2" runat="server" Text="Dominio" CssClass="qsfBodyTextLinkButtonNoHand" /><asp:DropDownList runat="server" Style="width: 300px; margin-left: 88px" />
                    </div>
                    <div class="qsfCellaSeparatore" style="margin-top: 15px;"></div>
                    <div style="margin-top: 20px;">
                        <asp:Label ID="Label3" runat="server" Text="Qualifica" CssClass="qsfBodyTextLinkButtonNoHand" /><asp:DropDownList ID="DropDownList1" runat="server" Style="width: 300px; margin-left: 88px" /><br />
                        <br />
                        <asp:Label ID="Label4" runat="server" Text="Utente Attivo" CssClass="qsfBodyTextLinkButtonNoHand" />
                        <asp:RadioButtonList ID="chkQualifica" runat="server" RepeatDirection="Horizontal" TextAlign="Right" Font-Size="Small">
                            <asp:ListItem Selected="True" Value="0" Text="No" />
                            <asp:ListItem Value="1" Text="Si" />
                        </asp:RadioButtonList>
                    </div>
                </fieldset>
            </div>
            <div style="width: 40%; margin-right: 7%; float: right;">
                <fieldset>
                    <legend style="color: Navy">Operazioni</legend>
                    <asp:Button runat="server" ID="btnSalva" CssClass="qsfButtonPurple95" Text="Salva" Font-Size="Small" />
                    <asp:Button runat="server" ID="btnAnnulla" CssClass="qsfButtonRed95" Text="Annulla" />
                </fieldset>
            </div>
        </form>
    </div>
</body>
</html>

My floating div doesn't reach the top even if I use {margin-top:0px}. It goes to the right right under my second div!

I can get it to work by setting {margin-top:-315px} but on different resolutions and screens, it get messed up!

How can I let my floating div get to the top of my website near the other divs instead of under?

EDIT: this is what I get:

<div id="parent">
    <div id="child">text</div>
</div>

http://jsfiddle.net/ksmd677d/1/

I would like the div with the legend "Anagrafica di Sistema" to get on top on the right of the div with the div with the legend "Anagrafica Utente" and down the "Anagrafica Utente" div I want the one with the legend "Contatti" and on the right the one with "Operazioni" in this way:

Anagrafica Utente - Anagrafica di Sistema (and down) Contatti - Operazioni

Upvotes: 1

Views: 450

Answers (1)

Boris
Boris

Reputation: 541

I moved div block with "Anagrafica di Sistema" to second place, that's what did you wanted?

1 div

 <div style="width: 40%; margin-left: 7%; margin-bottom: 5px; float: left;">
            <fieldset>
                <legend style="color: Navy">Anagrafica Utente</legend>...

2 div 

<div style="width: 40%; margin-right: 7%; float:right;">
            <fieldset>
                <legend style="color: Navy">Anagrafica di Sistema</legend>...

3 div

<div style="width: 40%; margin-left: 7%;  float: left;">
            <fieldset>
                <legend style="color: Navy">Contatti</legend>...

4 div

<div style="width: 40%; margin-right: 7%; float: right;">
            <fieldset>
                <legend style="color: Navy">Operazioni</legend>...

http://jsfiddle.net/38sogsbu/

Upvotes: 1

Related Questions