CODEWITHSUNDEEP
cssline-breaks
winchendonsprings
winchendonsprings

Reputation: 491

Line break with css

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/

Upvotes: 1

Views: 792

Answers (3)

TheTechGuy
TheTechGuy

Reputation: 17354

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.

Upvotes: 1

Starx
Starx

Reputation: 78981

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.

Upvotes: 6

user166560
user166560

Reputation:

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.

Upvotes: 1

Related Questions