CODEWITHSUNDEEP
htmlcssheight
Cheetah
Cheetah

Reputation: 14449

Set element height to expand to the height of parent

I have something like this:

<section>
    <h3>Header:</h3>
    <p>My text which could span over several lines.</p>
</section>

section
{
    background: #5E5E5E;
    overflow:hidden;
}

h3
{
    background: #B31B1B;
    padding: 13px;
    width: 174px;
    float:left;
}

p
{
    margin: 13px 13px 13px 213px;
}

I want the header background to extent to the bottom of the section but when the text in the <p> tag is more than a line it doesn't.

What can I do apart from using the faux columns technique?

Upvotes: 1

Views: 161

Answers (5)

mu is too short
mu is too short

Reputation: 434975

You could absolutely position the <h3> instead of floating it. Something like this:

section {
    background: #5E5E5E;
    position: relative;
    overflow: hidden;
}

h3 {
    background: #B31B1B;
    padding: 13px;
    width: 174px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

p {
    margin: 13px 13px 13px 213px;
}

Live example: http://jsfiddle.net/ambiguous/cZ3rh/

Absolutely positioning the <h3> can cause trouble if the <h3> ends up being taller than the <p> as absolutely positioned elements do not contribute to their parent's height:

http://jsfiddle.net/ambiguous/NQB4n/

I can't think of a decent solution for this case right now though.

Upvotes: 3

Gerard
Gerard

Reputation: 2860

just set height of the h3 element to 100%.

h3
{
      background: #B31B1B;
      padding: 13px;
      width: 174px;
      float:left;
      height: 100%;
}

Upvotes: 1

Jared Farrish
Jared Farrish

Reputation: 49238

An alternative could be to move the background to the SECTION and P tags.

section {
    background: #B31B1B;
    overflow:hidden;
    padding: 0;
}

h3 {
    padding: 13px;
    width: 174px;
    float:left;
}

p {
    margin: 0;
    background: #5E5E5E;
    padding: 13px;
    margin-left: 213px;
}

http://jsfiddle.net/pEfGq/

Upvotes: 2

Arsen Kazydub
Arsen Kazydub

Reputation: 5660

Can you apply the background to the section instead of h3?

Upvotes: 2

Ahsan
Ahsan

Reputation: 469

give a try to min-height = 100% in h3!

Upvotes: 1

Related Questions