0

My application has 1 parent box and 2 child boxes (divs). At the moment, the child boxes appear below each other

<div class="a">
    <div class="b">This is b</div>
    <div class="c">This is c</div>      
</div>

.a{border:solid;width:300px;}    
.b{border:solid;width:100px;color:red;}    
.c{border:solid;width:100px;color:green;}

http://jsfiddle.net/5EpYL/

enter image description here

Now, I want my 2 boxes (b and c) to be beside each other. I add a float left to both b and c

.a{border:solid;width:300px;}
.b{border:solid;width:100px;color:red;float:left;}
.c{border:solid;width:100px;color:green;float:left;}

http://jsfiddle.net/5EpYL/1/

enter image description here

As you can see, this has moved the children into the correct place, but the parent isn't framing them any more.

To fix it, I have to add a float left to the parent (wrapper) class but this then means the parent class if now floated, which surely must mean if this has a parent than that too has to float left, as it will all the way up the tree until the body tag?

My question is, why does the outer div (a) behave in this manner when it is not floated? Can I assume that because the children are floating, then the children are treated as if they're not there which is why the outer div's border doesn't encapsulate them?

Dave
  • 7,614
  • 10
  • 56
  • 99
  • 2
    Check out this answer [How do you keep parents of floated elements from collapsing?](http://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing?rq=1) – pasine Jan 10 '14 at 10:53
  • 1
    Another resource about clearfix approach [Which method of ‘clearfix’ is best?](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best) – pasine Jan 10 '14 at 10:57
  • possible duplicate of [Why clear both CSS?](http://stackoverflow.com/questions/12871710/why-clear-both-css) – Dave Jan 10 '14 at 11:04

4 Answers4

3

You need to clear the float. Just add a third div which does this.
http://jsfiddle.net/5EpYL/2/

<div class="a">
    <div class="b">This is b</div>
    <div class="c">This is c</div>    
    <div class="clear"></div>
</div>



.clear { clear: both; }
Anthony Weber
  • 383
  • 4
  • 7
  • Whilst this is probably a good answer (and the upvotes suggest it is a good answer :) ) is this not a hack? – Dave Jan 10 '14 at 10:55
  • This is an old approach that has been replaced from the more reliable clearfix method [Which method of ‘clearfix’ is best?](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best) – pasine Jan 10 '14 at 10:56
  • @DaveRook : its not a hack...its a way that comes with the package of `float`...because float's **confuse** the container about heights....check this thread to clear your understanding => http://stackoverflow.com/questions/12871710/why-clear-both-css/12871734#12871734 – NoobEditor Jan 10 '14 at 11:00
  • 1
    @DaveRook : meanwhile, you might wanna accept the answer!! :) – NoobEditor Jan 10 '14 at 11:02
  • @NoobEditor, actually, it doesn't. My question is why, not how to fix it (although I did give +1 as the answer is good). I've just voted to close this question of a duplicate because the post you cite answers the question. – Dave Jan 10 '14 at 11:05
  • @DaveRook : then i suggest browse before you ask next time fella!! :D – NoobEditor Jan 10 '14 at 11:07
  • I agree, there are newer solutions. But mine will work in old browsers. So, it just depends if you support old browsers and your taste ;) – Anthony Weber Jan 10 '14 at 11:09
1

add a class clearfix to your main wrapping div and add the following code in css

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
Green Wizard
  • 3,001
  • 4
  • 14
  • 28
0
.clear { clear: both; }

<div class="a">
    <div class="b">This is b</div>
    <div class="c">This is c</div>    
    <div class="clear"></div>
</div>
user3145373 ツ
  • 6,669
  • 6
  • 36
  • 55
  • 1
    Please do not copy other's answer. – sachinjain024 Jan 10 '14 at 10:55
  • @blunderboy - I don't have copied. This is not rule sir that there should be always different code of everyone in world . Sorry for that but I don't have copied that one. I have used this many time. when I used to display data using java script then mostly I use it. – user3145373 ツ Jan 10 '14 at 10:59
  • @user3145373 : used to happen with me when i was new too...next time type fast!! :) – NoobEditor Jan 10 '14 at 11:01
  • The problem here is your original post (which you edited within the first 5 minutes and as such there is no record) didn't show the .clear {clear: both} where as Anthony's did so I'm afraid your post will come across as if you've copied it. Technically you did write the code first (or at exactly the same time) I think, but, since your original post didn't format it correctly (didn't show all the code), it appears as if this is a copy (although it isn't) – Dave Jan 10 '14 at 11:02
  • @user3145373 I didn't downvote your answer.You are perfectly right in saying that two people can write same code. But you deleted your earlier answer and posted new answer which is similar to Waser's answer – sachinjain024 Jan 10 '14 at 11:02
0

You can also add an overflow:hidden on the parent element in order for it to wrap around the two child elements.

    <div class="a">
        <div class="b">This is b</div>
        <div class="c">This is c</div>      
    </div>

.a {overflow:hidden;}
Jetchy
  • 192
  • 1
  • 11