1

I've been trying to create a div that will automatically fill the rest of the space on the page. Here is an example (not working properly):

http://codepen.io/anon/pen/xbGLYX

#autoWidth should get the width depending on the content, and #fullWidth should fill the rest of the available space without creating a new line space.

As you see, there is #autoWidth and #fullWidth. I added float:left to both, to make them on the same line, however after styling the #fullWidth div (that needs to fill the remaining space on the same line with #autoWidth) it automatically created a second line.

There are other issues as well, for instance, the background-color property is not working as it should, for the container div.

I believe these are all connected issues with my question, and would appreciate a good solution.

PS - Looking for a CSS-only solution. As little hack as possible.

Mia
  • 6,220
  • 12
  • 47
  • 81
  • 2
    it's not a duplicate - the provided solution does not work for this case. – Mia Nov 25 '14 at 23:34
  • Use flex. See: http://codepen.io/anon/pen/ZYGJmL – Enzey Nov 26 '14 at 00:23
  • 1
    I second that this is not a duplicate. That answer is 3 years old and CSS Flexbox is the correct 'modern' solution for this issue. – Enzey Nov 26 '14 at 00:25
  • Float:left; on your container fixes the background but it's not an ideal solution. I second the flex box method – craigie2204 Nov 26 '14 at 00:32
  • An alternative to `flex` is to use `display:table` and `display:table-cell`, where `width:100%` means "the rest of the *available* space" (this is also supported in IE8+). Updated example: http://codepen.io/anon/pen/xbyGLX – Sphinxxx Mar 10 '15 at 22:07

0 Answers0