2 Div nebeneinander mit 50% Breite

Question

Ich habe ein DIV mit einer Breite von 1000 Pixel und in das DIV möchte ich 2 DIVs mit jeweils 50% Breite nebeneinander platzieren.

<style>
.container {
    width: 1000px;
    border: 1px solid black;
}

.inner {
    width: 50%;
    float: left;
    border: 1px solid red;
}
</style>

<div class="container">
    <div class="inner" style="background:green;">Div 1</div>
    <div class="inner" style="background:red;">Div 2</div>
    <div style="clear:both;"></div>
</div>

Aber die Div werden trotzdem untereinander angezeigt. Wenn ich die Breite der "inner" Div auf 49% setze passen sie zwar hinein aber dann bleibt ein Rand dazwischen. Kann ich die 2 inneren Div auf 50% Breite anzeigen ohne das ein Rand bleibt?

Answer 1

Das "display: inline-block;" ermöglicht es die "inner" Elemente nebeneinander anzuzeigen. Das "box-sizing: border-box;" stellt sicher, dass die Breite, die du festlegst, einschließlich des Inhalts, der Padding und der Border berechnet wird. JSFiddle Beispiel

<style>
.container {
    width: 1000px;
    border: 1px solid black;
}

.inner {
    width: 50%;
    border: 1px solid red;
    float:left;
    
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    
}
</style>

<div class="container">
    <div class="inner" style="background:green;">Div 1</div>
    <div class="inner" style="background:red;">Div 2</div>
    <div style="clear:both;"></div>
</div>