margin-top aligned to the bottom of two elements

Question

margin-top aligned to the bottom of two elements

Within this straightforward CSS snippet, my goal is to align the bottom of h1 with the bottom of p, without having h1 display below p.

<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>

The style of p cannot be altered and I do not have knowledge of the exact height of h1 (as it can vary between different heading elements).

I attempted using margin-top:100% instead of margin-top:100px, but this did not provide a solution either.

Thank you,

html css

Answer 1

Answer №1

To view the demonstration, please visit http://jsfiddle.net/3sWEt/3/

If you want to position an element at the bottom of a container, you can set `position:relative` to the container and then use `position:absolute` with `bottom:0` on the desired element:

Here is the CSS code:

#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%;
}

And here is the HTML code:

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

Answer 2

To view the demonstration, please visit http://jsfiddle.net/3sWEt/3/

If you want to position an element at the bottom of a container, you can set `position:relative` to the container and then use `position:absolute` with `bottom:0` on the desired element:

Here is the CSS code:

#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%;
}

And here is the HTML code:

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

Answer 3

Answer №2

For a solution to the issue mentioned, please refer: 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;
}

To maintain consistency, utilize the same properties such as line-height, display:inline-block, and vertical-align:bottom.

The main issue lies in the fact that <h1> does not expand its width to fill the remaining space within its parent element.

Answer 4

For a solution to the issue mentioned, please refer: 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;
}

To maintain consistency, utilize the same properties such as line-height, display:inline-block, and vertical-align:bottom.

The main issue lies in the fact that <h1> does not expand its width to fill the remaining space within its parent element.

margin-top aligned to the bottom of two elements

Answer №1

Answer №2

Similar questions

Utilize CSS to incorporate special characters as list markers

Stop an animation while it is in the hover state

There is excessive white space at the bottom of my Index page after the footer that needs to be removed

I'm having trouble extracting data into my HTML file using the append function in Jquery. What could be causing this issue?

Bootstrap 3 Implementation of a Clear Navbar

PHP is causing disruptions to HTML

What is the best way to eliminate the unwanted white space below the footer on a webpage

Issue with JQuery causing maxlength input not to work

Tips for dynamically appending a string to a predefined variable in React

Personalized design for the range input in React

Having issues with jQuery when trying to select only a single checkbox?

Fill an HTML table with comma-separated values (CSV) information

The Jqueryui image link is not displaying the image despite no error being reported

Retrieve information from a JSON script using C#

Mastering jQuery UI: A beginner's guide to utilizing the date picker widget

Transferring a unique Python object back and forth between Jinja2 and Flask

Should ng-binding be avoided in CSS selectors as a general rule?

Compel the browser to initiate a reflow by adjusting the CSS

Div that scrolls only when children can be displayed without overflowing

Tired of the premium content on Medium.com. How can I conceal premium posts that are aimed at a specific class within a parent element?