CSS border doesn't work with DIVs

Question

Its easy to see. In example 1 all works pretty well, but when I add one line of code more in example 2), it's breaking. Why? And how I should code it?

Example 1: http://jsfiddle.net/sUtvd/154/

[...].tripple {
width: 90%;
margin: 5%;
}[...]

Example 2: http://jsfiddle.net/Ec95D/3/

[...].tripple {
width: 90%;
margin: 5%;
border: solid;
}[...]

But, wait why in second example your dont have any border value? It is about border.. Or maybe I'm missing something — Szymon, Nov 06 '13 at 16:05

score 1 · Answer 1 · answered Nov 06 '13 at 16:01

1

Add float:left to .tripple if border should go all way around divs

answered Nov 06 '13 at 16:01

srdjans

11
3

score 1 · Answer 2 · answered Nov 06 '13 at 16:07

1

Add

display: inline-block;

to .tripple

http://jsfiddle.net/LaN5z/1/

answered Nov 06 '13 at 16:07

ZimTis

179
8

score 0 · Answer 3 · edited May 23 '17 at 11:50

You need to clear the floats. When all of the child elements are floating, the parent is not aware of their height, and so collapses. Putting something like a clearfix on the parent should fix the problem. See http://nicolasgallagher.com/micro-clearfix-hack/ for details on the clearfix.

See http://jsfiddle.net/designingsean/Ec95D/4/ for a working example. CSS from the link is below. Then just add .cf to the parent element.

.cf:before,
.cf:after {
  content: " ";
  display: table;
} 

.cf:after {
  clear: both;
}

You could also make the parent have an overflow set to pretty much anything, though auto makes the most sense in most cases. See http://jsfiddle.net/designingsean/cx7Wg/ for a working example of that.

For more on clearfix vs overflow, check out this pretty solid SO question and answer: What methods of ‘clearfix’ can I use?

score 0 · Answer 4 · answered Nov 06 '13 at 16:02

0

You should clear your floats: you can use this standard css from HTML5 biolerplate:

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

Fiddle

<div class="tripple clearfix">

answered Nov 06 '13 at 16:02

dezman

16,081
9
51
87

score 0 · Answer 5 · answered Nov 06 '13 at 16:10

0

I personally use a div which is to clear:both for these occasions. Check this fiddle.

http://jsfiddle.net/Ec95D/7/

answered Nov 06 '13 at 16:10

2hamed

8,301
12
64
108

score 0 · Answer 6 · answered Nov 06 '13 at 16:14

The float property in:

.left, .right, .middle {
    float:left;
    width: 33%;
    height: 100px;
}

makes the parent div empty. Float is a CSS positioning property.

There could be a better approach, but a simple way is to put each colored box in a table with 0 cell spacing and padding.

CSS border doesn't work with DIVs

6 Answers6