How to set Heading with the bottom border to the end

[toplisek]

How to set Heading with the bottom border to the end as sample CSS:
#my_h4 h4 {
display: inline;
border-bottom: 1px solid #000000;
color: #000000;
font-family: Sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
padding: 0 0 10px;
}

Border at the bottom should expand according to box around H3 not text limitation of H4. Is this possible to achieve?

[Paul_o_b]

You have made the h4 an inline element so that means it is only as long as the content that it holds. A border on an inline element will only match the content.

If you want the border to go full with of the container then set the element to display:block instead.

Note that you can't set vertical margins on inline elements and that vertical padding will not increase the height of the line but spill out over other elements.

[lucy24]

Border at the bottom should expand according to box around H3 not text limitation of H4.

Is there more than one h4 involved? Or rather: are there more h4s than h3s? It kinda sounds as if what you want is not a separate h4 at all, but something like <span class = "subhead"> attached to the preceding h3. The padding and border will then be properties of the h3, while the subhead only carries those properties that are different from the main h3.

[toplisek]

I have issue that image should be on the right like float:right;
and heading on the left top part. Inline settings eliminates break rule for heading.

[Paul_o_b]

It's still unclear what you require exactly I'm afraid.

If the reason you made the header inline so that it will stay on the same line as the floated right image then instead leave the header as display:block but float the right image first in the html and the header will stay to the side on the same line.

You will then need to use margin-right on the header to keep clear of the image otherwise the border will run behind the image also.

Not sure if that was what you were saying though as you mention h4 and h3 in the same sentence which was confusing.