Question

I have an inline-block span that takes up 80% of the page’s width, right after that I have another inline-block span, that takes up 0.753em, now I want to make a third one that will take up the rest.

Maybe it’ll be clearer in code:

<span style="width:80%; display:inline-block; background-color:lime"></span>
<span style="width:0.753em; display:inline-block"></span>
<span style="width:[?????????]; display:inline-block;background-color:lime"></span>

The third span, as mentioned should take up the rest of the page’s width, what width should I set to it?

Thanks.

Answer 1

I can’t think of a way to do it using display: inline-block.

Instead, here’s a float-based solution:

Live Demo

<span style="float:left; width:80%; height:30px; background-color: lime"></span>
<span style="float:left; width:0.753em; height:30px; background-color: green"></span>
<span style="display:block; overflow:hidden; height:30px; background-color:red"></span>

Why does this work? http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats