CODEWITHSUNDEEP
htmlcss
Mindaugas
Mindaugas

Reputation: 1183

wrap div around inline divs inside

I have container div and I populate it with other inline-block divs based on search results(search by tag and each inline div contains foundings). I want to wrap my container around my inline divs. Currently container is taking up 100% of screen. I can not set fixed width to container as the content is dynamic and might be 1, might be 5 or more inline divs.

Is there a way to achieve this with CSS? I am sure there is, but I am lost in this case a bit.

Thank you in forward for the help.

Upvotes: 1

Views: 554

Answers (1)

Turnip
Turnip

Reputation: 36702

Well, I guess this would work based on your description...

.container {
    float: left;
    clear: left;
    background: #f2f2f2;
    margin-bottom: 20px;
    padding: 15px;
    /* Important bit... */
    white-space: nowrap;
}

.item {
    display: inline-block;
    background: lightBlue;
    padding: 5px;
}
<div class="container">
    <div class="item">INLINE-BLOCK</div>
    <div class="item">INLINE-BLOCK</div>
    <div class="item">INLINE-BLOCK</div>
</div>

<div class="container">
    <div class="item">INLINE-BLOCK</div>
    <div class="item">INLINE-BLOCK</div>
    <div class="item">INLINE-BLOCK</div>
    <div class="item">INLINE-BLOCK</div>
    <div class="item">INLINE-BLOCK</div>
</div>

<div class="container">
    <div class="item">INLINE-BLOCK</div>
</div>

JSFiddle version

Upvotes: 2

Related Questions