How to bottom-align a floated div?

HTML & CSS
1

Suppose I have the following CSS:


* {
  margin: 0;
  padding: 0;
}

body {

  /* I.E. 7 (compatibility mode) hack */
  * text-align: center;
}

h4 {
  text-align: center;
}

.container {
  margin: 0 auto;
  width: 400px;

  /* I.E. 7 (compatibility mode) hack */
  * text-align: left;
}

.block {
}

.div_location_description {
  float: left;

  text-align: left;
  font-size: 25;
  font-weight: bold;
}

.div_address {
  float: right;

  font-weight: bold;

  text-align: right;
}

.clearit {
  clear: both;
}

…and the following HTML:


<div class="container">
  <h4>Sample Report &ndash; Must work in I.E. 7</h4>

  <hr>

  <div class="block">
    <div class="div_location_description">Room ABC</div>
    <div class="div_address">
      <div>Sample Address</div>
      <div>123 Main St</div>
      <div>Anywhere, NY 12345</div>
    </div>
    <div class="clearit"></div>
  </div>

  <hr>

  <div>Miscellaneous other stuff goes here.</div>
</div>

I had to float; left and float: right the two divs, because I want them left-aligned and right-aligned on the same line. Well now I want the “Room ABC” text to be bottom-aligned so that it is the same level as “Anywhere, NY 12345”, and I can’t do that. I tried using “vertical-align: bottom” but that didn’t work. I also want this to work in I.E. 7, so I don’t think I can use display: table-cell. Here is a jsFiddle of what I have so far. http://jsfiddle.net/qbhzgfo6/ Can anyone help me?

2

Apologies for the late reply. I was hoping someone else would take care of this. I’ve created a quick mockup for you here.

Does this example satisfy your example? IE7 has issues with display:inline-block so as a result, the hacks are necessary in my demo. Should be fine in IE7 although I have had that uninstalled for a while now.

To make IE7 get inline-block behavior, the element must have zoom:1; set and also display:inline.

Also IE7 has text-align:justify bugs so the manual text-align I’ve set for IE7 hacks are so that it properly holds the content where it needs to be. I’m sure if you remove those rules you will see the page break.

3

Apologies here, too. Somehow I missed your post.

Don’t know what your <!doctype> of choice is, and don’t know how wedded you are to your example code, so here is a pretty simple possibility that looks like it will be happy in all browsers. I can’t test the really old ones, either, but IE8 in compatibility mode seems happy.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1229697-How-to-bottom-align-a-floated-div
2014.08.21 12:09
MrSnrub
-->
    <style type="text/css">
.div_address {
    border-top:2px solid #888;
    border-bottom:2px solid #888;
    padding:2px 0;
}
.div_address p {
    font-weight:bold;
    text-align:right;
    overflow:hidden;
    margin:.125em 0;
}
.div_address p span {float:left;}
h4 {
    text-align:center;
    margin:.25em auto;
}
.otherstuff {margin:.25em auto;}


    </style>
</head>
<body>

<div class="outer">
    <h4>Sample Report &ndash; Must work in I.E. 7</h4>
    <div class="div_address">
        <p>Sample Address</p>
        <p>123 Main St</p>
        <p><span>Room ABC</span>Anywhere, NY 12345</p>
    </div>
    <div class="otherstuff">Container: Miscellaneous other stuff goes here.</div>
</div>

</body>
</html>
4

works great! thanks

5
6