Question

I have content in a fixed-width container that I am trying to format like so:

Description: [button][button]

Basically, the description label takes up 50%, the button controls take up 50%. I am doing this by floating the description like so:

<div style="width: 300px;">
  <div style="width: 145px; margin-right: 5px; float: left;">Description:</div>
  <div>[button][button]</div>
</div>

In the case that there are more buttons than will fit on the right side, rather than having them wrap like this:

Description: [button][button]
[button][button]

I’d rather have the layout look like:

Description: 
[button][button][button][button]

So basically, I am having trouble coming up with a simple layout that will keep the description label at 50% width, keep the controls unwrapped and handle both cases above. I am positive I am missing something simple – any pointers?

Answer 1

You can see my demo on JsBIN

Use the white-space property to prevent from line-breaking.