Probleme beim Platzieren von 2 divs nebeneinander in Wrapper

Question

Ich habe Probleme, 2 divs Seite an Seite innerhalb einer Verpackung zu setzen. Ich habe bereits bestehende Fragen und Artikel gelesen, wie man 2 divs nebeneinander platzieren kann; es scheint sehr einfach zu sein, einfach Breite und Float definieren: links für beide divs. Aber ich kann es nicht zur Arbeit bringen!

Jede Hilfe wäre willkommen, danke! :)

Hier ist die JSFiddle: https://jsfiddle.net/Toppoki/7pazLwLs/23/

HTML:

<div class="child1"> 
<div class="wrapper"> 
<div class="blurb"> 
</div> 
<div class="form"> 
</div> 
</div> 
</div> 

CSS:

.child1 { 
background:#082a46; 
margin:0; 
} 

.wrapper { 
width:970px; 
margin: 0 auto; 
} 

.blurb { 
color: #fff; 
width:200px; 
height:400px; 
float:left; 
} 

.form{ 
background-color:#9c0b0e; 
width:100px; 
height:400px; 
float:left; 
} 

Answer 1

Es funktioniert bereits für das Snippet Sie zeigte. Ich habe nur eine Hintergrundfarbe auf die div.form gesetzt, damit Sie sehen konnten. In Ihrem Beispiel auf jsfiddle die div.blurb fehlt die float:left, und es gibt eine Menge Dinge, die Sie verwirrt bekommen können.

Beginnen Sie mit dem Entfernen eines Teils des Platzhaltertexts und unnötiger Elemente und Stile. Fangen Sie damit an, es sehr einfach zu machen, ziehen Sie es gut ein und fügen Sie die Stile einzeln hinzu. Es wird irgendwann funktionieren. mit display:inline-block auf den beiden divs

.child1 { 
 
    background:#082a46; 
 
    margin:0; 
 
} 
 

 
.wrapper { 
 
    border: 1px solid #ccc; 
 
    width:970px; 
 
    margin: 0 auto; 
 
} 
 

 
.blurb { 
 
    color: #fff; 
 
    width:200px; 
 
    background-color: blue; 
 
    height:400px; 
 
    float:left; 
 
} 
 

 
.form{ 
 
    background-color:#9c0b0e; 
 
    width:100px; 
 
    height:400px; 
 
    float:left; 
 
}

<div class="child1"> 
 
    <div class="wrapper"> 
 
    <div class="blurb"> 
 
    </div> 
 
    <div class="form"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Sie können auch zwei divs nebeneinander platzieren.

(Wenn Sie wollen, dass es in Reaktion, die Breite des mit % und nicht Pixel Kind definieren.)

.child1 { 
 
    background:#082a46; 
 
} 
 

 
.wrapper { 
 
    border: 1px solid #ccc; 
 
} 
 

 
.blurb { 
 
    color: #fff; 
 
    background-color: blue; 
 
    width:200px; 
 
    height:400px; 
 
    display:inline-block; 
 
} 
 

 
.form{ 
 
    background-color:#9c0b0e; 
 
    width:100px; 
 
    height:400px; 
 
    display:inline-block; 
 
}

<div class="child1"> 
 
    <div class="wrapper"> 
 
    <div class="blurb"></div> 
 
    <div class="form"></div> 
 
    </div> 
 
</div>