CODEWITHSUNDEEP
htmlcss
Paul S
Paul S

Reputation: 250

Make a div fit inline-block content

How can I make a div scale to fit its content - if that content is a collection of inline-blocks?

I would like to do this in order to center several rows of divs, but have the last partial row left-aligned with those above.

#outer {
    border: 4px solid red;
    text-align: center;
}

#inner {
    display: inline-block;
    border: 4px solid blue;
    text-align: left;
}

.block {
    display: inline-block;   
    width: 150px;
    height: 100px;
    background-color: green;
    margin: 10px;
}
<div id="outer">
    <div id="inner">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

Link to JSFiddle example

As you can see from the JSFiddle, the blue inner div remains as wide as it's red parent (despite being inline-block itself and it's content not filling it). This causes the green blocks to remain left aligned.

You may need to resize the JSFiddle output to make some whitespace to the right of the green blocks to test this.

Here is roughly how it should look afterwards (if there are seven blocks over three rows): enter image description here

Upvotes: 2

Views: 2386

Answers (4)

Paul S
Paul S

Reputation: 250

In case anyone else finds this post, here is what I ended up doing:

I added several extra hidden blocks, one pixel high, so that the last row of visible blocks were lined up.

http://jsfiddle.net/bw8mm1gq/

It doesn't quite answer the question I asked, but does solve the problem I had.

Thanks to dwreck08 who also had a decent solution, that did answer my question.

I got the idea from here: center div blocks but not in the last row

#outer {
    border: 4px solid red;
    text-align: center;
}


.block {
    display: inline-block;   
    width: 150px;
    height: 100px;
    background-color: green;
    margin: 10px;
}

.spacer {
    display: inline-block;   
    width: 150px;
    height: 1px;
    margin: 0 10px;
}
<div id="outer">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
    <div class="spacer"></div>
</div>

Upvotes: 0

Derek Story
Derek Story

Reputation: 9593

Here is an example of what you can do to keep it responsive yet centered:

JS Fiddle

It uses media queries based on the the box widths:

@media only screen and (max-width: 1068px) {

    #inner {
        max-width: 866px;
    }
}
@media only screen and (max-width: 898px) {
    #inner {
        max-width: 692px;
    }
}
@media only screen and (max-width: 728px) {
    #inner {
        max-width: 518px;
    }
}
@media only screen and (max-width: 558px) {
    #inner {
        max-width: 344px;
    }
}
@media only screen and (max-width: 388px) {
    #inner {
        max-width: 170px;
    }
}

A bit tedious, but with a little math it is pretty easy.

The reason it won't work solely with display: inline-block is because when the boxes wrap, the blue div assumes the entire space (left and right) is to be used. It doesn't understand where the wrap begins.

Upvotes: 1

indubitablee
indubitablee

Reputation: 8206

here's one solution with a set width. the variable width is hard because you have the contents inside the blue box that is inline-block so the extra space on the right is due to the wrapping.

#outer {
    border: 4px solid red;
    text-align: center;
}

#inner {
    border: 4px solid blue;
    text-align: left;
    width: 520px;
    margin: auto;
}

.block {
    display: inline-block;   
    width: 150px;
    height: 100px;
    background-color: green;
    margin: 10px;
}
<div id="outer">
    <div id="inner">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

Upvotes: 0

HGFIRE Godwin
HGFIRE Godwin

Reputation: 9

Since your block's with and margin are manually defined in your css just set the with of your div with id="inner" to "520px"!!!

Upvotes: 0

Related Questions