Stretch empty block to fit container width

[charlie_wasp]

Hello there! I ran into one issue recently. Here’s what I want to achieve – http://jsfiddle.net/47VBE/

So, I’ve got three blocks, first and third must be floated left and right respectively, second(middle) must fit to all available width, but it has not any content(I think, I will use pseudo element in future). I do not know width of any of blocks, their content is dynamic.

Now I’m doing it with the real dirty, hacking code. I wonder, can I solve this problem with pure CSS?

[charlie_wasp]

Hello, shaneisme, and thank you for the answer and very useful screencast!

But I don’t think that grid system can solve my problem completely, because if I’ll set some width for my blocks, and there won’t be enough content to fill them, there will be gaps out of my control between them. And I want that blocks with content take only necessary width.

Do I speak clear?

[Paulie_D]

Not sure I have an absolute grasp on what you are after but with a slight adjustment to your HTML (I moved the underline span), you can do this.

http://jsfiddle.net/VET46/4/

[Paulie_D]

@wolfcry911

I like it…I’m wondering is there is a way to make it responsive &/or less dependent on fixed px values?

Obviously Flexbox could solve it but that would involve a non-‘semantic’ element…no?

Not worried about browser support.

[charlie_wasp]

Thank you, wolfcry91, for your Code Pen, it’s exactly what I meant. Now I need a time to work out this method for my situation, as soon as I get it, I’llcertainly post a Code Pen here.

Thanks to all, who replied, I very appreciate it, thank you for such warm welcome on css-tricks.com!

[Author]

Posts