Using inline-block display without the content floating left

Question

I want the width of a div element to be equal to the width of the content inside it, and also (and more importantly) that any content after this div does not start to the right of the div(as though the div was float:left;), but display below the current div. I know one way is that after this div, I create another empty div and set clear:both;, but in my case that would not be very preferable.

@slacker, a whole website is already in operation and having to go through the whole code gain and inserting the empty div tags would be a last resort for me(or so i want to convince myself). If it was possible to just play around with the css, that would make my day! — gthuo, Mar 20 '13 at 11:43
@Jon, wow! it works...only that it also means I have to go through all my code and insert the `
` tags! Any CSS solution? — gthuo, Mar 20 '13 at 11:46
@G Thuo, I think you should post some html and css as pith suggested — Sharun, Mar 20 '13 at 11:46
Here's my code: `
This is my bible!
And I say It again!!!` And here's the CSS: `#info { display:inline-block; background-color:#CFFF9F; color:black; font-weight:normal; border:black solid 1px; }` — gthuo, Mar 20 '13 at 11:49
@GThuo: "CSS solution" always goes together with "what browsers are you required to support?" — Jon, Mar 20 '13 at 11:58

score 2 · Accepted Answer · edited May 23 '17 at 12:20

I think that the following may be close to what you need:

The HTML demo code is:

<div>
Some text may be before the element.
<div id="info">This is my bible!</div>And some text may follow. the element.
</div>

And the CSS styles are:

#info {
    display:inline;
    background-color:#CFFF9F;
    color:black;
    font-weight:normal;
    border:black solid 1px;
}
#info:after {
    content:"\A"; 
    white-space: pre; 
}

Fiddle reference: http://jsfiddle.net/audetwebdesign/6FNQc/

Explanation of How This Works

Use :after to generate some content (known as a pseudo-element in CSS). The "\A" is interpreted as a line break (linefeed) provided that the white space is preserved, hence you need to set white-space: pre. Finally, the element has to be inline, hence display: inline.

Related References:
CSS to line break before/after a particular `inline-block` item

To learn more about "\A" (linefeed), see:
http://www.w3.org/TR/CSS21/syndata.html#strings

Using inline-block display without the content floating left

1 Answers1