I've used Blueprint to prototype a very simple page layout...but after reading up on absolute vs. relative positioning and a number of online tutorials regarding vertical positioning, I'm not able to get things working the way I think they should.

Here's my html:

<div class="container" id="header">
  <div class="span-4" id="logo">
    <img src="logo.png" width="150" height="194" />
  </div>
  <div class="span-20 last" id="title">
    <h1 class="big">TITLE</h1>
  </div>
</div>

The document does include the blueprint screen.css file.

I want TITLE aligned with the bottom of the logo, which in practical terms means the bottom of #header.

This was my first try:

  #header {
    position: relative;
  }

  #title {
    font-size: 36pt;
    position: absolute;
    bottom: 0;
  }

Not unexpectedly, in retrospect, this puts TITLE flush left with the left edge of #header...but it failed to affect the vertical positioning of the title. So I got exactly the opposite of what I was looking for.

So I tried this:

  #title {
    position: relative;
  }

  #title h1 {
    font-size: 36pt;
    position: absolute;
    bottom: 0;
  }

My theory was that this would allign the h1 element with the bottom of the containing div element...but instead it made TITLE disappear, completely. I guess this means that it's rendering off the visible screen somewhere.

At this point I'm baffled. I'm hoping someone here can point me in the right direction. Thanks!

2 answers

0
points

The styles that blueprint adds are confusing things. It uses floats to create the columns, and as soon as you make the content of a floated element amount to nothing (position:absolute;) it will occupy no space in the document flow.

If you also dimensioned #title you might have some success, but it's probably the wrong approach.

Add some borders to the divs so you can see what's happening, add 1px of top padding to each (to avoid margin collapse) and then add enough top margin to the h1 to bring it down into line.

The position declaration catches a lot of people out, it rarely does what you expect it to, and for that reason I tend to avoid it as much as possible, especially where everything is floated.

Answered over 5 years ago by Tony Crockford
  • Had a play around on jsfiddle and adding borders actually mucks up the layout with blueprint, better to add an outline. Rob Crowther over 5 years ago
  • Another good reason not to use a framework unless you know what you are (and it is) doing. :) Tony Crockford over 5 years ago
  • @Tony: The way you learn how a framework works is by using it. larsks over 5 years ago
  • @larsks: you need to know the basics before you need a framework. Or all you'll know is how to use the framework. Tony Crockford over 5 years ago
0
points

In your particular case you can align the bottom by adding padding to the top of #title:

#title {
    font-size: 36pt;
    padding-top: 52px; 
}

Here's an example.

More generally, I'd try and make the logo a background image of #title instead of giving it a whole container to itself.

Answered over 5 years ago by Rob Crowther
  • Rob, what would be the advantage of making the logo a background on #title? The goal here is to have the logo aligned with a navigation column later on in the document (which I could accomplish anyway by setting it as a background and then using the appropriate padding/margins on the title, I guess). larsks over 5 years ago
  • @larsks The advantage is that you wouldn't then be fighting with blueprint.css in order to make two elements position themselves relative to each other, it would just all be part of a single element, so you'd be less vulnerable to changes in font-size etc. mucking up your alignment. Rob Crowther over 5 years ago