CODEWITHSUNDEEP
css
Philipp Kühn
Philipp Kühn

Reputation: 1649

Three columns float with 1px space inside?

can anyone help me to find a CSS solution here, please? here is a scribble:

Scribble

The wrapper has a variable width and the inside space of the floating boxes should exactly 1px. the margin-bottom is no problem - but the margin on the left/right side. how to solve this with width:33%?? :(

Thanks in advance.

EDIT: this would be a mobile friendly page. so there are fewer columns if the browser size is smaller. i will do this with @media.

Upvotes: 4

Views: 819

Answers (3)

LoveAndCoding
LoveAndCoding

Reputation: 7947

It's not possible to mix percents and pixels in the manner in which you are thinking. 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 */
}

That said, 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;
}

The ordering of the columns, however, is fill in the left and then move onto the next item, so using this will mess up your ordering, but balance the height. The other CSS to use would be grid-columns but that is not supported yet, so no use coding for it at the moment.

Upvotes: 2

srijan
srijan

Reputation: 1522

<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 design. some glitches may be visible in different resolutions, but should work in most cases.

Upvotes: 1

Sergiy T.
Sergiy T.

Reputation: 1453

A sort of what you want may be achieved with display: table, table-row, table-cell.
Take a look: http://jsfiddle.net/FtYqe/7/ This will not work in IE7 and older.

Upvotes: 0

Related Questions