Two 50% width divs don't fit in parent

Question

Sorry if it is a duplicate of something, I have searched honestly, but I still have the problem which is shown in this fiddle: http://jsfiddle.net/tfvdzzee/1/

The code here:

html

<div id="wrap">
    <div id="one">1</div>
    <div id="two">2</div>
</div>

css

#wrap
{
    max-width: 400px;
    margin: auto;
    border: 2px solid black;
}
#one, #two
{
    width: 50%;
    background: green;
}
#two
{
    float: right;
    background: red;
}

You only floated one of them. Float #one left and it should work — Toby Osborne, Aug 11 '14 at 13:02
@Sifu, would only work if you commented out the white space between them — Pete, Aug 11 '14 at 13:05
@Sifu Since the width is 50% display:inline-block will push the 2nd block down. — undefinedtoken, Aug 11 '14 at 13:06
@TobyOsborne idk why, but float:left to #one crashes parent's border in my fiddle. — VIRUS, Aug 11 '14 at 13:13
@VIRUS because you don't have `overflow: hidden;`. See SW4's answer. — TylerH, Aug 11 '14 at 13:13
Hey I added an answer which fixed the float issue; the cause is that floating an element kind of takes it out of flow from the container which is why using clear:both after the floats is required. Check my answer below which I also included the display:inline-block method as well just in case you want to experiment. — Toby Osborne, Aug 11 '14 at 13:15
It's insane that the whitespace between the dwo divs causes `inline-block`s to be pushed down... it's clearly not displayed anywhere and yea.. annoying. — Martin B., May 06 '15 at 09:13
Does this answer your question? [Two inline-block elements, each 50% wide, do not fit side by side in a single row](https://stackoverflow.com/questions/18262300/two-inline-block-elements-each-50-wide-do-not-fit-side-by-side-in-a-single-ro) — Friedrich -- Слава Україні, Dec 27 '21 at 19:51

Sifu · Accepted Answer · 2014-08-11T13:22:19.713

6

I believe display: inline-block; is the best answer, as it prevents bugs of overlapping and overflowing, while also keeping its parent definitions.

JsFiddle Demo

HTML

<div id="wrap">
    <div id="one">1</div><!--
 --><div id="two">2</div>
</div>

CSS

#wrap
{
    max-width: 400px;
    margin: auto;
    border: 2px solid black;
}

#one, #two
{
    width: 50%;
    background: green;
    display: inline-block;
    /* If worried about IE7 and IE6, add the two next lines */
    *display: inline;
    *zoom: 1;
}

#two
{
    background: red;
}

edited Aug 11 '14 at 13:22

answered Aug 11 '14 at 13:09

Sifu

1,082
8
26

Hmm... It works! I wonder, I have made 2 pages like this but `display: inline-block` didn't help, but now. I am confused. But thank you. – VIRUS Aug 11 '14 at 13:17
3

@VIRUS It's probably because you didn't comment out the whitespace between the two divs. – TylerH Aug 11 '14 at 13:18
@TylerH I would never understand this if u didn't say. I am done :D – VIRUS Aug 11 '14 at 13:20

score 4 · Answer 2 · answered Aug 11 '14 at 13:05

Demo Fiddle

You need to both float:left the #one element as well as set overflow:hidden to the parent to ensure it wraps the children correctly.

Change your CSS to:

#wrap
{
    max-width: 400px;
    margin: auto;
    border: 2px solid black;
    overflow:hidden; /* <---ensure the parent wraps the children */

}

#one, #two
{
    width: 50%;
    background: green;
    float:left; /* <---ensure the children display inline */
}

#two
{
    float: right;
    background: red;
}

score 2 · Answer 3 · answered Aug 11 '14 at 13:03

2

Add the following style in your CSS.

 #one{float:left}

DEMO

answered Aug 11 '14 at 13:03

Suresh Ponnukalai

13,820
5
34
54

score 2 · Answer 4 · answered Aug 11 '14 at 13:04

2

Remove the Css property for #two and add this

#one, #two
{
    width: 50%;
    background: green;
    float: left;
}

answered Aug 11 '14 at 13:04

undefinedtoken

921
1
8
26

1

@Sifu - no it wouldn't... unless they had absolute poitioning – Danield Aug 11 '14 at 13:08

score 1 · Answer 5 · answered Aug 11 '14 at 13:04

1

Use float: left and you don't need float: right for #two.

#one, #two
{
    width: 50%;
    background: green;
    float: left;
}

#two
{
    background: red;
}

Fiddle example.

answered Aug 11 '14 at 13:04

rageit

3,513
1
26
38

This moves them outside of the border that is applied to #wrap – TylerH Aug 11 '14 at 13:11

score 1 · Answer 6 · answered Aug 11 '14 at 13:05

You will need to float both your divs. After the float, clear the float using the clearfix class.

CSS:

#one, #two{ float:left; }

.clearfix:after {
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both;
   height: 0;
 }

HTML:

<div id="wrap" class="clearfix">
  <div id="one">1</div>
  <div id="two">2</div>
</div>

DEMO

score 1 · Answer 7 · edited Aug 11 '14 at 13:12

1

#wrap
{
    max-width: 400px;
    margin: auto;
    border: 2px solid black;
}
#wrap:after{
    clear:both;
    content:"";
    display:block;
}

#one, #two
{
    width: 50%;
    float:left;
    background: green;
}

#two
{
    background: red;
}

Try this and use clearfix on the :after pseudo element of your #wrap div.

DEMO

edited Aug 11 '14 at 13:12

TylerH

20,799
66
75
101

answered Aug 11 '14 at 13:06

Benjamin

2,612
2
20
32

Why so complicated, while you can just use inline-blocks? – Sifu Aug 11 '14 at 13:12

score -2 · Answer 8 · answered Aug 11 '14 at 13:13

-2

To Expand on the comment by sifu and answer the question in a choice of ways

The first method (Using float's)

#wrap
{
  max-width: 400px;
  margin: auto;
  border: 2px solid black;
}
#one,#two
{
  float:left;
  width:50%;
}

http://jsfiddle.net/tfvdzzee/7/

Display Inline-block method

#wrap
{
   max-width: 400px;
   margin: auto;
   border: 2px solid black;
   font-size:0px;
}
#one,#two
{
   width:50%;
   display:inline-block;
   font-size:16px;
}

http://jsfiddle.net/tfvdzzee/8/

Both methods can be used however if you are still developing for IE7 (not sure why you would) then method 2 wont work.

answered Aug 11 '14 at 13:13

Toby Osborne

385
1
10

Please don't copy other peoples' answers and post them as your own, even if to consolidate them into one answer. New answers should add new ways to solve the problem. – TylerH Aug 11 '14 at 13:14
Method 2 works with the simple css hack : `{display:inline-block; *display: inline; zoom: 1;}` – Sifu Aug 11 '14 at 13:20
Sifu - Thanks I didn't know that myself appreciate it. - sorry if you feel I copied your answer. @TylerH - If you look at our answers they are not completely the same; we get around the white space issue differently. I mentioned Sifu's answer as they have similarities and I noticed that he posted a comment on the question that seemed to be getting burned out a little for a perfectly good answer. I apologies – Toby Osborne Aug 11 '14 at 13:28

Two 50% width divs don't fit in parent

8 Answers8

Demo Fiddle