html - margin-top to straight bottom of two elements

Question

In the following simple CSS code, I’m trying to straight the bottom of h1 with the bottom of p (h1 shouldn’t be under p like in my code).

<div id="sqrs" style="width:200px; height:200px; border:1px solid BLACK;">
<p style="width:100px; height:100px; background-color:BLUE; float:right;">blue</p>
<h1 style="background-color:YELLOW; margin-top:100px;">yellow</h1>
</div>

P style cannot be changed and I don’t know the height of h1 (since it can be h2, h3…)

I’ve tried margin-top:100% (instead margin-top:100px) but this is not the solution as well.

Thanks,

Answer 1

See http://jsfiddle.net/3sWEt/1/

#sqrs{
    width:200px; height:200px; border:1px solid black;
    line-height:100px;
    text-align:right;
}
#sqrs>*{
    text-align:left;
    line-height:normal;
}
#sqrs>p{
    width:100px; height:100px; background-color:blue; float:right;
}
#sqrs>h1{
    background-color:yellow;
    display:inline-block;
    vertical-align:bottom;
}

You can use same line-height, display:inline-block and vertical-align:bottom.

But the problem is that the <h1> doesn't expand it's width to cover it's parent's remaining width.

Answer 2

See http://jsfiddle.net/3sWEt/3/

You can set position:relative to a container and position:absolute with bottom:0 to the <h1>:

CSS:

#sqrs{
    width:200px; height:200px; border:1px solid black;
    overflow:hidden;
}
#sqrs>*{
    height:100px;
}
#sqrs>p{
    width:100px; background-color:blue; float:right;
}
#sqrs>div{
    overflow:hidden;
    position:relative;
}
#sqrs>div>h1{
    background-color:yellow;
    position:absolute;
    bottom:0;
    width:100%;
}

HTML:

<div id="sqrs">
    <p>blue</p>
    <div><h1>yellow</h1></div>
</div>