divs verhält sich nicht richtig

-2

Was mache ich falsch? hier ist die HTML:divs verhält sich nicht richtig

<body> 
<div class="container"> 
<div id="header"> 
    <p id="title">PNR File Finish</p> 
</div> 
    <div id="leftside"> 
     <form> 
      <div> 
       <label for="comp_Name">Company:<br/> <input id="comp_name" type="text" value="" name="" size="30" 
                  maxlength="50"><br/><br/> 
       <label for="nick">Company Code:<br/> <input id="nick" type="text" value="" name="" size="4" 
                   maxlength="4"><br/><br/> 
       <label for="clientID">ClientID:<br/> <input id="clientID" type="text" value="" name="" size="10" 
                    maxlength="10"><br/><br/> 
       <label for="Recloc">Record Loc:<br/> <input id="recloc" type="text" value="" name="" 
                     size="10" maxlength="6"><br/><br/> 
       <p id="info">Please be sure Client Name and Client ID are correct before running File 
            Finishing!</p> 
       <a href="#" class="btn btn-primary btn-md active" role="button">Run File Finish</a> 
       <hr> 
       <a href="#" class="btn btn-primary btn-md active" role="button">Reload PNR</a><br /><br /> 
       <p id="info2">If Customer information is incorrect, reload underlying PNR</p> 
     </form> 
    </div> 
    <div id="right_box"> 

    </div> 

</div> 

</body>

Und hier ist die CSS:

body { 
    background-color: white; 
} 

.container{ 
    width: 1200px; 
    height: 800px; 
    backround-color: #FAEBD7; 
} 

#header{ 
    height: 50px; 
    background-color: darkblue; 
} 

#title{ 
    text-align: center; 
    color: white; 
    font-size: 30px; 
    padding-top: 5px; 
} 

#leftside{ 
    width: 300px; 
    float: left; 
    height: 600px; 
    border-left: 1px solid darkblue; 
    border-right: 1px solid darkblue; 
    border-bottom: 1px solid darkblue; 
    padding-top: 30px; 
    padding-left: 5px; 
    padding-right: 5px; 

} 

#right_box{ 
    width: 100px; 
    height: 600px; 
    float: left; 
    border: 1px solid darkblue; 

}

rechten Box in und deutlich unter stattdessen auf der rechten Seite erscheint. Ich habe viele verschiedene Möglichkeiten ausprobiert, aber ich kann es nicht zum Laufen bringen. Tut mir leid, ziemlich neu. Jede Hilfe wäre willkommen.

Quelle

2017-02-16 user2774415

Sie haben eine Tonne HTML-Fehler, einschließlich einer Anzahl von nicht geschlossenen Elementen, die wahrscheinlich dieses Problem verursacht. Überprüfen Sie Ihren HTML-Code unter https://validator.w3.org und überprüfen Sie, ob Sie ihn löschen können. –

Sie scheinen Syntaxfehler zu haben, hier ist es aufgeräumt und (hoffentlich) funktioniert wie vorgesehen.

body { 
 
    background-color: white; 
 
} 
 

 
.container { 
 
    width: 1200px; 
 
    height: 800px; 
 
    backround-color: #FAEBD7; 
 
} 
 

 
#header { 
 
    height: 50px; 
 
    background-color: darkblue; 
 
} 
 

 
#title { 
 
    text-align: center; 
 
    color: white; 
 
    font-size: 30px; 
 
    padding-top: 5px; 
 
} 
 

 
#leftside { 
 
    width: 300px; 
 
    float: left; 
 
    height: 600px; 
 
    border-left: 1px solid darkblue; 
 
    border-right: 1px solid darkblue; 
 
    border-bottom: 1px solid darkblue; 
 
    padding-top: 30px; 
 
    padding-left: 5px; 
 
    padding-right: 5px; 
 
} 
 

 
#right_box { 
 
    width: 100px; 
 
    height: 600px; 
 
    float: left; 
 
    border: 1px solid darkblue; 
 
}

<div class="container"> 
 
    <div id="header"> 
 
    <p id="title">PNR File Finish</p> 
 
    </div> 
 
    <div id="leftside"> 
 
    <form> 
 
     <div> 
 
     <label for="comp_Name">Company:<br> 
 
\t \t \t \t \t <input id="comp_name" maxlength="50" name="" size="30" type="text" value=""><br> 
 
\t \t \t \t \t <br> 
 
\t \t \t \t \t <label for="nick">Company Code:<br> 
 
\t \t \t \t \t <input id="nick" maxlength="4" name="" size="4" type="text" value=""><br> 
 
\t \t \t \t \t <br> 
 
\t \t \t \t \t <label for="clientID">ClientID:<br> 
 
\t \t \t \t \t <input id="clientID" maxlength="10" name="" size="10" type="text" value=""><br> 
 
\t \t \t \t \t <br> 
 
\t \t \t \t \t <label for="Recloc">Record Loc:<br> 
 
\t \t \t \t \t <input id="recloc" maxlength="6" name="" size="10" type="text" value=""><br> 
 
\t \t \t \t \t <br></label></label> 
 
     </label> 
 
     </label> 
 
     <p id="info"><label for="comp_Name">Please be sure Client Name and Client ID are correct before running File Finishing!</label></p><label for="comp_Name"><a class="btn btn-primary btn-md active" href="#" role="button">Run File Finish</a></label> 
 
     <hr> 
 
     <label for="comp_Name"><a class="btn btn-primary btn-md active" href="#" role="button">Reload PNR</a><br> 
 
\t \t \t \t \t <br></label> 
 
     <p id="info2"><label for="comp_Name">If Customer information is incorrect, reload underlying PNR</label></p> 
 
     </div> 
 
    </form> 
 
    </div> 
 
    <div id="right_box"> 
 
    <label for="comp_Name"></label> 
 
    </div> 
 
</div>

Quelle

2017-02-16 22:29:52 Sman

Vielen Dank für Ihre schnellen Antworten. Ich teste es morgen aus. – user2774415

@ user2774415 Klicken Sie auf die Schaltfläche "Code-Snippet ausführen", um das Layout anzuzeigen. – Sman

Sie einfach verpasst haben Ihre div-Tag in Ihrem Formular-Tag zu schließen, die die Eingabeelemente hält.

Quelle

2017-02-16 22:33:22 chatterb0x

Mit Shauns Beispiel habe ich das zum Laufen gebracht. Danke Ihnen allen für Ihre Beiträge. – user2774415

divs verhält sich nicht richtig

Antwort

Verwandte Themen