CSS How to I align a header with a height of 2em to the bottom


Tags: css

Problem :

I would like to create a header that spans over 1 or two lines vertically. I would like to align these headers via the bottom line. I have created a jsfiddle page to demonstrate this:

http://jsfiddle.net/S35Db/

HTML:

<h3>ABC</h3><h3>DEF JEH</h3>

CSS:

h3 {
float:left;
border: 1px solid grey;
padding:10px;
margin: 5px;
max-width:3em;
height:3em;

}

What I would like to do is align the ABC to the JEH. How do I go about doing this? Do I need to create container around the header?

Thanks



Solution :

CSS :

h3 {
    float:left;
    border: 1px solid grey;
    padding:10px;
    margin: 5px;
    max-width:3em;
    height:3em;
}

.bottom {
    line-height:65px;
}

HTML :

<h3 class="bottom">ABC</h3>
<h3>DEF JEH</h3>

Try this I think ie. what you need.


    CSS Howto..

    How to downsize a larger image while showing only one portion of it in CSS (or adding JS to the mix if necessary)?

    How do I expand this CSS list?

    How to know when you have received an image in the browser?

    How do I have a border-bottom on all except the last item

    How can I add a pulse animation to a div in an array of divs, in Javascript?

    How to center my navigation using .css

    HTML+CSS : how to move not close divs to create a right column?

    How to make css for navbar (Jquery Mobile) bottom up submenu automatic?

    How can I move all my CSS box shadows back under div

    How to resize image automatically on browser width resize but keep same height?

    CSS/JQuery: how to create submenu for table row that stays visible mousing from row onto menu?

    How can I vertically center text in a ul navigation-bar without these multiple CSS conflicts?

    how to apply stylesheet to wp frontend, via plugin i created?

    How to change header font and nav link color when slideshow image changes

    how to use css button to post method in a form?

    How to use getElementId on and ID's Element

    How do I hide text that is not wrapped in

    or ?

    CSS: how can I hide a div when its text doesn't fit?

    How to convert an image for a website menu button into CSS

    How do I make this menu using only HTML and CSS

    How to undo CSS change after clicking on another link

    How to do CSS attribute selector with title~= that has to contain a space?

    How to break a word with two 50% table cells?

    How to avoid this hardcoded index.js when use webpack?

    How to best format an HTML form like this where user can dynamically add subfields? (table? list? css3?)

    How do I prevent a link tag from adding extra padding below an image?

    How fix labels placement so them not overlap in DevExpress js chart?

    HTML - How to do a square plain button while using jQuery Mobile css [closed]

    How to make footer not overlap and positioned properly?

    How to have an image overlap the edge of a div