Three columns float with 1px space inside?

Question

Can someone help me find a CSS solution here? here is the carabiner:

The shell has a variable width, and the inner space of the floating boxes should be exactly 1px. the lower border is not a problem - but the margin is left / right. how to solve this with width: 33% ??: (

Thanks in advance.

EDIT: This will be a mobile page. therefore, the number of columns is less if the browser size is smaller. I will do it with @media.

Answer 1

<div class="Dummy"> <div class="insideDummy">aloha</div> <div class="insideDummy">aloha</div> <div class="insideDummy">aloha</div> <div class="insideDummy">aloha</div> <div class="insideDummy">aloha</div> <div class="insideDummy">aloha</div> </div> 

Where

 .Dummy{float:left; min-width:99.9%; height:auto; background:#999999; float:left;} .insideDummy{ float:left; width:33.25%; min-width:10%; height:300px; background:#99FFCC; margin-left:1px; margin-top:1px;} 

Extremely fluid construction. Some glitches may be visible in different resolutions, but should work in most cases.

Answer 2

It is not possible to mix percentages and pixels in the way you think. However, you can do the following:

 .innerdiv { display: inline-block; /* IE 8+ Compatible because IE 7 only supports inline-block on elements that are inline by default. There are work-arounds to this though. */ width: 30%; margin: 2%; /* gutter */ } 

However, you can also use:

 .wrapper { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-gap: 1px; -moz-column-gap: 1px; -webkit-column-gap: 1px; } 

However, ordering the columns fills the left and then moves to the next element, so using this will ruin your order, but balance the height. Other CSS used will be grid-columns , but this is not yet supported, so don't use it at the moment.

Answer 3

Most likely you can achieve display: table , table-row , table-cell .
Take a look: http://jsfiddle.net/FtYqe/7/ This will not work in IE7 and older.