Question

I often find that I want an element to adjust its width to the size of the elements it contains. inline-block acheives this. However, I do NOT want the inline part of inline-block — i.e., I still want the next inline-block element to appear below it.

Is there a simple way to achieve this in CSS? I know I can’t always but <br> tags after the element in my HTML, but that’s annoying.

Answer 1

there are many solutions, the most common one is to use float

<div class="float">
  <div class="child">here is content</div>
</div>

.float{float: left;}

if you want enforce that an element is in the new line you add clear: both (or left or right, depending on your needs)

please take into account, that display: inline-block does not work in IE7. The only problem with float is when you want this div to adjust to the width of a child AND to position it at the middle of the page horizontaly

one more note, remember that overflow: hidden property is your best friend whenever you encounter any issues with floated divs 🙂