Making a div expand to available width, alongside an h1/h2 tag

Question

Here's a JSFiddle:

Here's a screenshot of what I'm aiming for:

enter image description here

And what I'm getting in my browser:

enter image description here

The key difference is that in the actual implementation, the bars do not fill the available width of the containing div element. If I place: width:100%, the bar expands to it's container width, but goes down, below the text; despite both elements being floated left.

Any suggestions?

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

This solution should help: https://stackoverflow.com/a/1767270/1472586

Basically remove float: left and width from the bars and add overflow: hidden to them. You may also have to adjust your margins accordingly (right padding on the headings might work better, for example).

edited May 23 '17 at 12:13

Community

1
1

answered Jul 16 '12 at 18:12

Jen

586
3
12

Worked like a charm! I had to add `padding-right:5px;` to both h1 and h2 elements, but it's working great now. Thanks! – Only Bolivian Here Jul 16 '12 at 18:16

Making a div expand to available width, alongside an h1/h2 tag

1 Answers1