CODEWITHSUNDEEP
htmlcsscss-float
Cindy
Cindy

Reputation: 35

Having trouble placing 2 divs side by side in wrapper

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;
}

Upvotes: 2

Views: 88

Answers (2)

Mathieu Schaeffer
Mathieu Schaeffer

Reputation: 792

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>

Upvotes: 1

Mauricio Moraes
Mauricio Moraes

Reputation: 7373

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>

Upvotes: 2

Related Questions