Unerwartete Ausrichtung mit float: links und float: rechts in div-Elementen

Question

Ich habe einige Probleme, die ich nicht lösen kann.

Dies ist das Ergebnis erhalte ich:

Und das ist das gewünschte Ergebnis: (schnelles Draht-Framing)

HTML-Code:

<div id="fileOutput"> 
    <h2><center>DASHBOARD</center></h2> 
    <div id="tittletextbox1"><img src="images/computer.png" style="vertical-align: middle;"> Basics</div> 
    <div id="textbox1"></div> 
    <div id="tittletextbox2"><img src="images/network.png" style="vertical-align: middle;"> Networking</div> 
    <div id="textbox2"></div> 
</div> 

Sowohl Text Boxen sind mit JavaScript-Objekten gefüllt.

CSS:

div#fileOutput{ 
    margin: auto; 
    margin-top: 50px; 
    margin-left: 250px; 
    margin-right: 50px; 
    margin-bottom: 50px; 
    display:block; 
    overflow:auto; 
    white-space: pre-line; 
    border: solid 1px black; 
    padding: 5px; 
} 

div#tittletextbox1{ 
    float:left; 
    width: 40%; 
} 

div#tittletextbox2{ 
    float:right; 
    width: 40%; 
} 

div#textbox1{ 
    float:left; 
    width: 40%; 
    border: 1px solid black;   
} 

div#textbox2{ 
    float:right; 
    width: 40%; 
    border: 1px solid black;   
} 

Answer 1

Wenn Sie die divs wickeln und entfernen white-space: pre-line, ich glaube, Sie haben, was Sie Auf der Suche nach.

div#fileOutput{ 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    margin-left: 250px; 
 
    margin-right: 50px; 
 
    margin-bottom: 50px; 
 
    display:block; 
 
    overflow:auto; 
 
    border: solid 1px black; 
 
    padding: 5px; 
 
} 
 

 
div#tittletextbox1{ 
 
    float:left; 
 
    width: 40%; 
 
} 
 

 
div#tittletextbox2{ 
 
    float:right; 
 
    width: 40%; 
 
} 
 

 
div#textbox1{ 
 
    float:left; 
 
    width: 40%; 
 
    border: 1px solid black;   
 
} 
 

 
div#textbox2{ 
 
    float:right; 
 
    width: 40%; 
 
    border: 1px solid black;   
 
}

<div id="fileOutput"> 
 
    <h2><center>DASHBOARD</center></h2> 
 
    <div> 
 
     <div id="tittletextbox1"><img src="images/computer.png" style="vertical-align: middle;"> Basics</div> 
 
     <div id="tittletextbox2"><img src="images/network.png" style="vertical-align: middle;"> Networking</div> 
 
    </div> 
 
    <div> 
 
     <div id="textbox1"></div> 
 
     <div id="textbox2"></div> 
 
    </div> 
 
</div>

Answer 2

Sie müssen die Elemente von der linken Seite in eine div, und die, die von rechts in die andere wickeln.

Auf diese Weise stapelt sich Ihre #textbox1 nur auf der linken Seite von #tittletextbox1, was dazu führt, dass die letzteren Boxen unter ihre 80% des Bildschirms zusammenfallen.

HTML:

<div id="left-wrapper"> 
    <div id="tittletextbox1"><img src="images/computer.png" style="vertical-align: middle;"> Basics</div> 
    <div id="textbox1"></div> 
    </div> 
    <div id="right-wrapper"> 
    <div id="tittletextbox2"><img src="images/network.png" style="vertical-align: middle;"> Networking</div> 
    <div id="textbox2"></div> 
    </div> 

CSS:

div#left-wrapper { 
    float:left; 
    width: 40%; 
} 

div#right-wrapper{ 
    float:right; 
    width: 40%; 
    border: 1px solid black;   
} 

https://jsbin.com/qiliyageri/2/edit?html,css,output

Answer 3

Generell ist es keine gute Idee, verschiedene Werte von float unter Geschwisterelementen zu setzen. Das Entfernen der white-space Eigenschaft, das Umsortieren divs und das Hinzufügen eines clearfix divs machte den Trick.

div#fileOutput { 
 
    margin: auto; 
 
    margin-top: 50px; 
 
    margin-left: 250px; 
 
    margin-right: 50px; 
 
    margin-bottom: 50px; 
 
    display: block; 
 
    overflow: auto; 
 
    border: solid 1px black; 
 
    padding: 5px; 
 
} 
 
div#tittletextbox1 { 
 
    float: left; 
 
    width: 40%; 
 
} 
 
div#tittletextbox2 { 
 
    float: left; 
 
    width: 40%; 
 
} 
 
div#textbox1 { 
 
    float: left; 
 
    width: 40%; 
 
    border: 1px solid black; 
 
} 
 
div#textbox2 { 
 
    float: left; 
 
    width: 40%; 
 
    border: 1px solid black; 
 
} 
 
.clearfix { 
 
    clear: both; 
 
}

<div id="fileOutput"> 
 
    <h2><center>DASHBOARD</center></h2> 
 
    <div id="tittletextbox1"> 
 
    <img src="images/computer.png" style="vertical-align: middle;">Basics 
 
    </div> 
 
    <div id="tittletextbox2"> 
 
    <img src="images/network.png" style="vertical-align: middle;">Networking 
 
    </div> 
 

 
    <div class="clearfix"></div> 
 
    <div id="textbox1">Text</div> 
 
    <div id="textbox2">Text</div> 
 
</div>