CODEWITHSUNDEEP
htmlcsswidth
user1026090
user1026090

Reputation: 458

CSS - h1 take rest of width

In my titlebox I have an icon (<img>) and a title (<h1>). Both are floated to the left.

I would like my title (<h1>) to take up the rest of the width of the box. So if I put text-decoration: underline; on the <h1>, the underline must go on to 'till the end of the box.

JsFiddle: http://jsfiddle.net/44XDa/1/

Basically I want the line under Welcome to go 'till the end of the yellow box.

Can anyone help?

Upvotes: 0

Views: 825

Answers (4)

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Live demo

Hey now used to box-shadow and remove h1 float left as like this and manage to bottom line as line-height

Live demo

Upvotes: 0

DaoWen
DaoWen

Reputation: 33019

You don't need to make the h1 float if the only other element in the area is already floating. As the other posters have already pointed out, you probably want to use a border rather than an underline to get this effect. Here are my edits:

http://jsfiddle.net/44XDa/36/

The main difference between my solution and those above is that this one doesn't set a width for the h1 element. This will make it easier if you decide to alter the width of the content-title div in the future.

Upvotes: 1

simme
simme

Reputation: 1554

Here you go:

http://jsfiddle.net/44XDa/34/

Might this be what you want?

Upvotes: 0

Tel&#233;mako
Tel&#233;mako

Reputation: 673

Check this changes

I used border bottom to simulate the underline to the end. I reduced your line height and added padding top to place it where you had it. Remove the text decoration and you'll have a single line.

Upvotes: 0

Related Questions