reset float after second column

Question

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

score 4 · Accepted Answer · edited May 23 '17 at 12:29

4

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

edited May 23 '17 at 12:29

Community

1
1

answered Oct 07 '13 at 05:10

grc

22,885
5
42
63

that also nice, but this way `.test` do not expands to content :( http://jsbin.com/aJiMECE/9/edit in last block of this demo i show what I want to acheive, but this requered html change – zb' Oct 07 '13 at 05:16
can you please add this to answer ? – zb' Oct 07 '13 at 05:31
1

@eicto sorry for the late reply. I'm not sure why `inline-block` works tbh, but you can look at [this question](http://stackoverflow.com/questions/804926/make-outer-div-be-automatically-the-same-height-as-its-floating-content) for a better solution. I've updated my answer. – grc Oct 07 '13 at 06:37

score 1 · Answer 2 · answered Oct 07 '13 at 04:51

1

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;
}

answered Oct 07 '13 at 04:51

Josh Crozier

233,099
56
391
304

no way if I still want to have `.test` not match width of summ collumns? like here: http://jsbin.com/aJiMECE/2/edit The idea is to have .test as independed block; – zb' Oct 07 '13 at 05:00
@eicto Still not fully understanding.. `.a` / `.b` will have fixed widths - but the parent, `.test` shouldn't? Which example are you trying to achieve..? – Josh Crozier Oct 07 '13 at 05:04
yes, or fixed width more than summ of them, I can make such layout using wrap for `.a` and `.b`, but just trying to understand if it necessary – zb' Oct 07 '13 at 05:05

reset float after second column

2 Answers2