set div width to content without inline-block

Question

I want to set the width of divs to their contents and keep the divs under each other. Using display:inline-block effectively floats the divs next to each other. How can I do this?

While BR tag will work, this is not a good method as there is no way to determine the amount of line space or padding the BR will induce between browsers. Clear:both is the semantic CSS solution in this case. — Judson Terrell, May 29 '13 at 04:33

score 1 · Accepted Answer · answered May 29 '13 at 04:32

1

Working jsFiddle Demo

Consider the following markup:

<div class="text">apple</div>
<div class="text">banana</div>
<div class="text">kiwi</div>
<div class="text">orange</div>

Float and clear all, here is the CSS:

.text {
    background: yellow;
    float: left;
    margin-bottom: 3px;
    clear: both;
}

answered May 29 '13 at 04:32

The poster of this question wants the display inline property hence wanting the box to be the size of its content. They should only have to use clear both. – Judson Terrell May 29 '13 at 04:35
@JudsonTerrell How you would set the `width` of a `block` element to the width of the content within it? You must explicitly make it `inline` or `inline-block`, or make it `float`, or change the `position` of it to `absolute`. If they aren't floated, so clear is useless. – May 29 '13 at 04:37
I meant along with inline block. Another option is to put a div between them with only clear both. – Judson Terrell May 29 '13 at 04:40
@JudsonTerrell `float` property will do nothing with `inline-block` elements. – May 29 '13 at 04:41

Judson Terrell · Answer 2 · 2013-05-29T04:45:47.330

0

Put clear: both on them this will keep them from floating, and yes you do need float "something"

#div1, #div2{

    display: inline;
    float: left;
    clear: both;
    border: 1px solid grey;

}

<div id="div1">some content here that is bigger</div>
<div id="div2">some content here</div>

edited May 29 '13 at 04:45

answered May 29 '13 at 04:31

Judson Terrell

4,204
2
29
45

Yep, NOX's solution works fine setting the div width to the contents without using inline-block. – IlludiumPu36 May 29 '13 at 04:41
Mmm...what if I want the divs to be center aligned? I'll post another question... – IlludiumPu36 May 29 '13 at 04:51
See http://stackoverflow.com/questions/16805802/set-div-width-to-content-without-inline-block-and-keep-divs-under-each-other-cen – IlludiumPu36 May 29 '13 at 04:58

set div width to content without inline-block

2 Answers2