CODEWITHSUNDEEP
htmlcss
VIRUS
VIRUS

Reputation: 319

Two 50% width divs don't fit in parent

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

Upvotes: 7

Views: 3572

Answers (8)

Sifu
Sifu

Reputation: 1082

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

Upvotes: 6

Toby Osborne
Toby Osborne

Reputation: 375

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.

Upvotes: -2

Benjamin
Benjamin

Reputation: 2670

#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

Upvotes: 1

karan3112
karan3112

Reputation: 1867

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

Upvotes: 1

SW4
SW4

Reputation: 71150

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

Upvotes: 4

rageit
rageit

Reputation: 3601

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.

Upvotes: 1

undefinedtoken
undefinedtoken

Reputation: 931

Remove the Css property for #two and add this

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

Upvotes: 2

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

Add the following style in your CSS.

 #one{float:left}

DEMO

Upvotes: 2

Related Questions