CSS div border around child divs

Question

I have one container div, which contains 3 divs inside it.
When i write border:1px solid red for container div, border is shown only on top of these 3 child divs, but not around them.

Below is css code.

#cont { width:800px; margin-right:auto; margin-left:auto; border:1px dashed red; padding:2px; } #third, #second, #first { width:260px; float:left; margin:2px; }

Html code:

![<div id="cont"> <div id="third"><p>A demo text </p></br> <p>A demo text </p></br> <p>A demo text </p></br> <p>A demo text </p></br> </div> <div id="second"><p>A demo text </p></br> <p>A demo text </p></br> <p>A demo text </p></br> <p>A demo text </p></br> </div> <div id="third"><p>A demo text </p></br> <p>A demo text </p></br> <p>A demo text </p></br> <p>A demo text </p></br> </div> </div>][1]

add below the third div: <div style="clear: both;"></div> that most likely will do the trick — Tikkes
– Tikkes, Commented Jan 21, 2013 at 8:05

jikey · Accepted Answer · 2013-01-21 08:05:47Z

4

add overflow:hidden;

#cont {width:800px;margin-right:auto;margin-left:auto; border:1px dashed red;padding:2px; overflow:hidden;}

answered Jan 21, 2013 at 8:05

jikey

3943 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

msinfo Over a year ago

thanks! it worked, could you explain a bit...because what i know about overflow doesn't explains me how this happens. (overflow: controls data which may overflow, from an element) so what caused overflow here?

jikey Over a year ago

This is rule, because child elements used floating, so must to remove floating. In this equivalent to clearfix. .clearfix{*zoom:1}.clearfix:after{content:".";height:0;visibility:hidden;display:block;clear:both} <div id="cont" class="clearfix">

syrkull · Accepted Answer · 2013-01-21 08:06:07Z

0

<div style="clear:both;float:none;"></div> well solve your problem. added it under the div's

answered Jan 21, 2013 at 8:06

syrkull

2,3846 gold badges37 silver badges68 bronze badges

2 Comments

msinfo Over a year ago

um . .yes it did. . .thanks for info. . but i need to float my child div to left. (oops my requirement ; 3 column layout)

syrkull Over a year ago

you need to place the code that I gave you, before the last div in your code.

Adam · Accepted Answer · 2013-01-21 08:09:01Z

0

add overflow:hidden to the #cont element

answered Jan 21, 2013 at 8:09

Adam

6237 silver badges17 bronze badges

1 Comment

msinfo Over a year ago

how come i could not see, your answer first, as you replied before @jrkey . . . they say IE6 sucks, they say right. (i could see your post rendered properly in firefox) thanks

Collectives™ on Stack Overflow

CSS div border around child divs

3 Answers 3

2 Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Linked

Related