CODEWITHSUNDEEP
htmlcsscss-float
Fijjit
Fijjit

Reputation: 1467

How to align floated elements to the bottom of their container

Simple question, but I'm struggling with solution.

Jsfiddle here.

How can I get the title and date to both align to the bottom of the container, while ensuring that:

HTML:

div class="titlebar bgEarth0">
    <h1 id="title">Test Title</h1>
    <h2 id="date">23 October 2013</h2>
    <div class="icon"></div>
    <div class="buttonArea">
        <div class="button"></div>
    </div>
</div>

CSS:

.titlebar { height: 50px; border:1px solid #000}
#title {font-size: 20px; font-weight: normal; float: left;  margin:0}
#date { font-size: 12px; font-weight: normal; float: left; margin-left: 30px;  margin:0 12px}
.buttonArea {position:relative; overflow:auto; height:40px; margin-top:5px}
.button {margin:0 auto; width:60px; height:40px; background:#0000ff}
.icon {float:right; background:#ff0000; height:40px; width:60px; margin-top:5px}

Upvotes: 2

Views: 1172

Answers (3)

Ghassan Elias
Ghassan Elias

Reputation: 2233

http://jsfiddle.net/hC236/

You can use absolute position. Wrap title and date with a div and set its position to absolute.

HTML:

<div class="titlebar bgEarth0">
    <div class="bleh">
         <h1 id="title">Test Title</h1>
         <h2 id="date">23 October 2013</h2>
    </div>
    <div class="icon">ddd</div>
    <div class="buttonArea">
        <div class="button"></div>
    </div>
</div>

CSS:

.titlebar {
    height: 50px;
    border:1px solid #000;
    position: relative;
}
.bleh {
    position: absolute;
    bottom: 0px;
    left: 0px;
}
#title {
    font-size: 20px;
    font-weight: normal;
    float: left;
    margin:0
}
#date {
    font-size: 12px;
    font-weight: normal;
    float: left;
    margin-left: 30px;
    margin:0 12px
}

.buttonArea {
    position: absolute;
    overflow:auto;
    height:40px;
    top:5px;
    right: 0px;
}

.button {
    margin:0 auto;
    width:60px;
    height:40px;
    background:#0000ff
}

.icon {
    background:#ff0000;
    height:40px;
    width:60px;
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

OR Table Example:

http://jsfiddle.net/hjM56/

HTML:

<div class="titlebar">
  <div class="col-1">
    <h1 id="title">Test Title</h1>
    <h2 id="date">23 October 2013</h2>
  </div>
  <div class="col-2">
    <div class="icon"></div>
  </div>
  <div class="col-3">
    <div class="button"></div>
  </div>
</div>

CSS:

.titlebar {


display: table;
    height: 50px;
    border: 1px solid #000;
    width: 100%;

}

.col-1,
.col-2,
.col-3 { display: table-cell; }

.col-1 {
    white-space: nowrap;
    vertical-align: bottom;
    width: 1%;
}

.col-2 {
    text-align: center;
    width: auto;
}

.col-3 {
    text-align: right;
    width: 1%;
}

#title {
    font-size: 20px;
    font-weight: normal;
    display: inline-block;
    margin: 0px;
    padding: 0px;
}

#date {
    font-size: 12px;
    font-weight: normal;
    margin-left: 12px;
    margin-top: 0px;
    margin-right: 12px;
    margin-bottom: 0px;
    display: inline-block;
    padding: 0px;
}

.button {
    width: 60px;
    height: 40px;
    background: #0000ff;
    margin-top: 5;
    display: inline-block;
}

.icon {
    background: #ff0000;
    height: 40px;
    width: 60px;
    margin-top: 5px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}

Upvotes: 1

usernolongerregistered
usernolongerregistered

Reputation: 390

You shouldn't use floating unless necessary. See this JSFiddle Live Demo

Basically if you remove the floats and display:inline-block; instead, they will align. I also removed the overflow:auto, as that would limit the icon area.

Also, adding left:15%; will align the blue area between the date and the red area.

EDIT: Example with max-width specifications to contain the div inside the title bar. Live Demo

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

Here is one way to do it but it involves some extra mark-up.

I added some wrappers around the title and date as follows:

<div class="titlebar">
    <div id="titleArea">
        <div id="table-wrap">
        <div id="table-cell">
             <h1 id="title">Test Title</h1>
             <h2 id="date">23 October 2013</h2>
        </div>
        </div>
    </div>
    <div class="icon"></div>
    <div class="buttonArea">
        <div class="button"></div>
    </div>
</div>

Apply the following CSS:

.titlebar {
    height: 50px;
    border:1px solid #000
}
#titleArea {
    height:40px;
    margin-top:5px;
    float: left;
}
#table-wrap {
    display: table;
    height: 100%;
}
#table-cell {
    display: table-cell;
    height: 100%;
    vertical-align: bottom;    
}
#title {
    font-size: 20px;
    font-weight: normal;
    padding:0;
    display: inline;
}
#date {
    font-size: 12px;
    font-weight: normal;
    padding-left: 12px;
    display: inline;
}
.buttonArea {
    position:relative;
    overflow:auto;
    height:40px;
    margin-top:5px;
    border: 1px dotted blue;
}
.button {
    margin:0 auto;
    width:60px;
    height:40px;
    background:#0000ff
}
.icon {
    float:right;
    background:#ff0000;
    height:40px;
    width:60px;
    margin-top:5px;
    border: 1px dotted blue; /* for demo only */
}

See demo at: http://jsfiddle.net/audetwebdesign/5NDDQ/

I created an outer wrapper #titleArea that has the same height and top margin as the #buttonArea.

Within #titleArea, I created a CSS table/table-cell (two nested div's) so that I can get the vertical alignment to be at the bottom.

Finally, I set display: inline to #title and #date.

A detail that may need adjustment involves the base line of the title and time. The bottom leading causes the text to sit slightly above the bottom edge of the button.

It seems like a lot of work for what appears to be a relatively simple requirement.

To make this a bit more bullet-proof, I would add a min-width to the .titlebar to prevent the .buttonArea to develop a horizontal scroll bar and the .icon from wrapping to a second line.

Upvotes: 1

Related Questions