CODEWITHSUNDEEP
csscss-multicolumn-layout
whiterook6
whiterook6

Reputation: 3534

Div containing columns is too tall

(I've looked at some other questions like this on stack, particularly Extra space at the bottom of CSS columns, but I couldn't see the issue the asker was having in the fiddle he presented, and trying that solution didn't work anyways.)

Anyways, I have extra space added below my columns in a div with column-width applied. Here's a link to the an example. My issue is the extra blue space below any columns. When I remove one or another, it seems to settle. Can I have the container div shrink to only use as much space as is needed?

HTML:

<div class="columns">
    <div class="font-console column_div">
        <b>authors:</b>
        <ul>
            <li>author_name</li>
            <li>author_id</li>
        </ul>
    </div>
    <div class="font-console column_div">
        <b>authors:</b>
        <ul>
            <li>author_name</li>
            <li>author_id</li>
            <li>checked_out</li>
            <li>checked_out</li>
        </ul>
    </div>
    <div class="font-console column_div">
        <b>checkouts:</b>
        <ul>
            <li>checked_out</li>
            <li>checked_in</li>
            <li>checked_out</li>
            <li>checked_in</li>
            <li>checked_out</li>
            <li>checked_in</li>
            <li>checked_out</li>
            <li>checked_in</li>
        </ul>
    </div>
    <div class="font-console column_div">
        <b>authors:</b>
        <ul>
            <li>author_name</li>
            <li>author_id</li>
        </ul>
    </div>
    <div class="font-console column_div">
        <b>books:</b>
        <ul>
            <li>ttttttytytytytytytytytytytytytytytytytytytytytytytytytyty</li>
            <li>author_id</li>
        </ul>
    </div>
</div>

CSS:

.columns {
    -webkit-column-count: 3;
    margin: 10px;
    background-color: #0099ff;
}    

.column_div {
    -webkit-column-break-inside: avoid;
    background-color: #ff9900;
    display: block;
}

Upvotes: 1

Views: 1042

Answers (2)

Sam Holguin
Sam Holguin

Reputation: 563

.columns {
    -webkit-column-count: 3;
    margin: 10px;
    background-color: #0099ff;
}

.column_div {
    -webkit-column-break-inside: avoid;
    background-color: #ff9900;
    display: block;
    margin-bottom: 10px;
}

.column_div:nth-child(3) {
    margin-bottom: 0;
}

.columns ul {
    margin:0;
}

One fix to solve the vertical spacing and lack of margin between columns

Upvotes: 0

Learner
Learner

Reputation: 4004

If you are talking about the blue space, it's because of the UL.

Just put margin:0 for the UL tag

.columns ul {
    margin:0;
}

http://jsfiddle.net/EAqE9/1/

Upvotes: 2

Related Questions