CODEWITHSUNDEEP
css
zb'
zb'

Reputation: 8059

reset float after second column

I have the following layout:

HTML:

<div class="test">
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
   <div class="a"> test</div><div class="b">test2</div>
</div>

CSS: 

.test .a,.test .b {
  float: left;
  width: 100px; 
}

.test .a:nth-child(4n+1) , .test .b:nth-child(4n+2) { 
  background: lightgreen;
}


.test .b:after {
  clear: both;
  display: block;
  content: "\a";  
}

it does not reset float after .b;

what I tried to acheive is two column list like 

test test2
test test2
test test2
test test2

where both columns have fixed width

Is here any way to acheive my goal using only CSS ? (no html markup change)

http://jsbin.com/aJiMECE/12/edit

Upvotes: 1

Views: 1427

Answers (2)

grc
grc

Reputation: 23585

You could use :nth-child():

.test .a:nth-child(2n+1) {
    clear: both;
}

Example

To give the container div a width/background, you can add this (see here):

.test {
    background: red;
    width: 400px;
    overflow: hidden;
}

Example

Upvotes: 4

Josh Crozier
Josh Crozier

Reputation: 241198

Do you want something like this? jsFiddle here

It seems to be the layout you are trying to achieve - unless I am missing something.

CSS

.test {
    width:200px;
}
.test > div {
    width:100px;
}
.a {
    float:left;
}
.b {
    float:right;
}

Upvotes: 1

Related Questions