Question

I’d like to float a <p> to the bottom of a <div>, but as far as I can tell, I can’t set the parent <div> to position:relative or position:absolute without mucking up my layout, which uses the Susy framework for Compass.

How else can I do this?

Relevant HTML is:

<header>
  <div class='grid'>
    <div class='logo'>
      <img src='/images/logo3.png'>
    </div>
    <div class='tagline'>
      <p>Fast Facts About Your Website, Your Competition, And Best Practice</p>
    </div>
  </div>
</header>

Relevant CSS is:

header {
  clear: both;
}

.grid .logo {
  width: 30.43478%;
  float: left;
  margin-right: 4.34783%;
  display: inline;
  padding-left: 3.75em;
  margin: 0;
}

.grid .tagline {
  width: 65.21739%;
  float: right;
  margin-right: 0;
  #margin-left: -3.75em;
  display: inline;
}

Answer 1

As far as I understand from your question you need <p> below your logo so clear your float after the logo div My Fiddle

<div style="clear: both;"></div>
<div class='tagline'>
  <p>Fast Facts About Your Website, Your Competition, And Best Practice</p>
</div>

And why are you using floating widths? does it need to be so accurate? and why display: inline; in .logo and .tagline