Line break with css

Question

I have 7 divs in a row with all very little content. I want to have the first 3 one a line then the next 3, and so on.

<div class="parent">
 <div class="child-a">abc</div>
 <div class="child-b">def</div>
 <div class="child-c">ghi</div>
 <div class="child-d">jkl</div>
 <div class="child-e">mno</div>
 <div class="child-f">pqr</div>
 <div class="child-g">stu</div>
</div>

So how can I make this work?

For the first line I have

.child-a, .child-b, .child-c {
 padding: 0 2% 0 0;
 width:100%
 display: inline;
 float: left;
 }

What would the css be for child-c, child-d, child-e so that they would be displayed below child-a, child-b, child-c rather than on the same line?

My complete code: http://jsfiddle.net/winchendonsprings/UfswL/11/

• Mr.T.K: Give certain width to parent class.
• Kobi: Note that width:100% display: inline; cancel each other - you're missing a ;, so neither work. Fortunately, float: left; hides this issue. Think about what you're doing - do you really need float here? Can you give the children and the parent widths, as Thilakar suggested? (for example 50px/160px will keep 3 in a line)

Answer 1

A better way to go would be something like this.

.parent div { float: left; }
.parent div:nth-child(3n + 1) { clear: left; }

Every element after the third will go to next line. Demo

This is do what you asked the first 3 one a line then the next 3, and so on. efficiently despites some browsers compatiblity issues.

• winchendonsprings: Maybe you can give me a hand with the exact code. jsfiddle.net/winchendonsprings/b3uwy

Answer 2

You forgot the dots for the classes:

.child-a, .child-b, .child-c,
.child-d, .child-e, .child-f,
.child-g, .child-h, .child-i {
 padding: 0 2% 0 0;
 width:100%
 display: inline;
 float: left;
}
.child-d { clear: left; }
.child-g { clear: left; }

This will make it so that 'd' and 'g' can't have a floated element to their left.

• winchendonsprings: This worked great too. Basically the same as the answer above. Thanks!

Answer 3

What I am getting is you want 3 divs one top row, then 3 divs on second row, then the last two divs on last row. If that is correct, you dont need 7 ID's. Instead use one class.

.child_div {
 width: 33%;
 height: 50px; /* for beautification */
 float: left;
}

All child divs must use this class. The divs will automatically align themselves side by side.

A couple of issues that may arise:

• The parent div will have 0 height because all of it's child divs are floated. To fix this, you can set the parent div's height (does not respond to content length), or set overflow:hidden; or overflow:auto; ("pulls" the child content inside)
• Different browsers may react a little differently. For example for IE, you need width:32.5%; for example because it works a bit different. Hope it helps.

• winchendonsprings: This worked too. But divs with more content to them didn't look quite as good. Maybe if all the divs had a lot or a little content this would be best. But the divs varied so it kind of looked strange with some lines wrapping and some not. Thanks