Having trouble placing 2 divs side by side in wrapper

Question

I'm having trouble putting 2 divs side by side within a wrapper. I've read existing questions and articles on how to place 2 divs side by side; it seems very simple, just define width and float:left for both divs. However, I can't get it to work!

Any help would be appreciated, thank you! :)

Here is the 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;
}

Simple and easy: [**Align divs side-by-side with flexbox**](http://stackoverflow.com/a/32122011/3597276) — Michael Benjamin, Jun 10 '16 at 22:34

score 2 · Accepted Answer · answered Jun 10 '16 at 20:46

It's already working for the snippet you showed. I just put a background color on the div.form so you could see.

In your example on jsfiddle the div.blurb lacks the float:left, and there is a lot of things that can get you confused.

Start taking off some of the placeholder text and unnecessary elements and styles. Start making it very simple, indent it well, and add the styles one at a time. It will eventually work.

.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>

score 1 · Answer 2 · answered Jun 10 '16 at 21:54

You can also place 2 divs side by side using display:inline-block on the two divs.

(If you want it responsive, define the width of the child with % and not pixels.)

.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>

Having trouble placing 2 divs side by side in wrapper

2 Answers2