CODEWITHSUNDEEP
htmlcss
Siddharth Thevaril
Siddharth Thevaril

Reputation: 3788

How to make 2 div inside an outer div inline?

This jsFiddle has the code that I've implemented. I have a div which contains 2 div that should be inline.

The outermost div must be 100% in width and each inner div's must have width:50%. The problem is the inner div stack on top of each other. If I change width of either one to 49%, then they're inline, but there seems to be some sort of padding from bottom.

I tried float:lefton both the inner div and that made the inner div's inline but then the outer div's height won't adjust automatically according to height of inner div's. How do I resolve it?

Upvotes: 1

Views: 3090

Answers (6)

surreymagpie
surreymagpie

Reputation: 327

The reason your two divs don't fit is that inline-block respects whitespace. You have a carriage return between .box-one and .box-two. This is rendered as a space character between the blocks.

You have four options which I have illustrated in this codepen http://codepen.io/magpie/pen/QwzNYe:

1: If you wish to use display: inline-block, you can either set font-size: 0 on the .outer div and reset it for the child divs. Then the 'space' will literally take up zero pixels in width and everything will fit. Obviously, if the .outer div will contain text, this won't work. The other alternative is simply to remove the carriage return between the child divs as Danield has shown.

2: You can use floats but the .outer div will collapse in height. To counter this, apply a clearfix or simply overflow: hidden to .outer

3: You can use a fake table layout by applying display: table to .outer and display: table-cell to the children. You will need to specify the 100% width of the .outer div.

4: Most simple of all is to use flexbox. Make the .outer div display: flex and voila! Support is pretty good these days: check http://caniuse.com for support and necessary vendor prefixes.

Upvotes: 1

iacobalin
iacobalin

Reputation: 598

Maybe this is what you are looking for?

.outer {
  background-color: green;
  display: table;
  width: 100%;
}
.box-one {
  background-color: red;
  height: 200px;
  display: table-cell;
}
.box-two {
  background-color: blue;
  height: 200px;
  display: table-cell;
}
<div class="outer">
  <div class="box-one"></div><div class="box-two"></div>
</div>

Upvotes: 1

ASHU
ASHU

Reputation: 94

.outer {
  background-color: green;
  width: 100%;
  float:left;
}

.box-one {
  width: 50%;
  background-color: red;
  height: 179px;
  float: left;
}

.box-two {
  width: 50%;
  background-color: blue;
  height: 179px;
  float: left;
}

Upvotes: 2

Danield
Danield

Reputation: 125443

Remove the white-space between the child elements. (See this post)

FIDDLE

.outer {
  background-color: green;
  width: 100%;
}
.box-one {
  width: 50%;
  background-color: red;
  height: 200px;
  display: inline-block;
}
.box-two {
  width: 50%;
  background-color: blue;
  height: 200px;
  display: inline-block;
}
<div class="outer">
  <div class="box-one"></div><div class="box-two"></div>
</div>

Upvotes: 0

Manwal
Manwal

Reputation: 23816

Give both first and second div width:50%

Check DEMO

Update:

Just remove display: inline-block; from both divs DEMO

Upvotes: 1

Antonio Smoljan
Antonio Smoljan

Reputation: 2207

You can just make the container overflow:hidden to quickly contain floated elements 

 #container {
   width: 100%;
   background-color: #ffcc33;
   margin: auto;
   overflow: hidden;
  }

 #first {
   width: 50%;
   float: left;
   height: 300px;
   background-color: blue;
 }
 #second {
   width: 50%;
   float: left;
   height: 300px;
   background-color: green;
 }

Here is the fixed fiddle.

Otherwise i'd recommend looking into clearfix.

Upvotes: 1

Related Questions