H1 on the left, “buttons” on the right, vertically

Question

I'm trying to display on one line:

• a H1 element aligned to the left of the containing box
• several "buttons" (A elements here) aligned to the right of the containing box
• all being on the same baseline

Is it possible to do this with minimal markup (i.e. no wrapping elements) and without having to set precise heights, line-heights, margin-tops, etc.

<div id="block1">
    <h1>What a great title</h1>
    <a href="javascript:void(0)">This link can kill you</a>
    <a href="javascript:void(0)">Click if you dare</a>
</div>

The fiddle here shows what I feel are two incompatible directions (inline-blocks and you can't align to the right vs. float right and you can't align vertically): http://jsfiddle.net/GlauberRocha/bUsvX/

Any idea?

Answer 1

One potential approach to this, depending on your exact needs, is to use a table layout:

#block3 {
  display: table;
  width: 100%;
  box-sizing: border-box;
}

#block3 > * {
  display: table-cell;
}

#block3 > *:last-child {
  text-align: right;
}

JSFiddle: http://jsfiddle.net/bUsvX/39/

If you want the buttons strictly aligned right, I think this solution requires another element to wrap them:

JSFiddle: http://jsfiddle.net/bUsvX/40/

Answer 2

It's hard to achieve without any wrapping elements or fixed values...

Adding a fixed line-height to both the Heading and the Links would solve your problem rather quick.

• Align your Links with 'display:block; float:right' to the right.
• Now Set "line-height: 40px;" to both the heading and the links

Should work, but only when the size of the heading doesn't change....

Answer 3

I had the same issue.. Add display:inline to the h1, then for buttons: float:right; display:inline;

example (with use of Twitter Bootstrap):

<h2 style="display:inline">Users</h2>

<a href="users.xls"><i class="icon-download-alt"></i>XLS</a>

<form style="display:inline; float:right;">
   <input type="text" class="input-medium search-query" name="search">
   <button class="btn" type="submit">Search</button>
</form>

Answer 4

I did this to my site a quite ago: a h2 on the left, and a button on the right. Screen shot:

Code:

<div id="side_bar" class="clearfix">
  <h2 style="float: left;">Charity Map</h2>
  <button class="btn btn-primary" style="float: right; position: relative; top: 10px; right: 10px;">Submit</button>
</div>

Answer 5

You have a potential problem with that layout - what if your H1 is too long and so are the buttons? They will run in to each other. Because of this, no simple CSS will do - CSS doesn't do magic like that - it would have to imply some sort of solution to the above problem.

However, what you want can simply be accomplished using absolute positioning:

<div style="position: relative;">
    <h1 style="position: absolute; left: 0; top: 0">What a great title</h1>
    <div style="position: absolute; right: 0; top: 0; text-align: right">
        <a href="javascript: void(0)">This link can kill you</a>
        <a href="javascript: void(0)">Click if you dare</a>
    </div>
</div>

If you are really afraid that the header and the anchor container might run in to each other depending on generated content, you can use CSS max-width and overflow properties to restrict their containing boxes to some sensible values. The overflowing content will be hidden but at least the layout will not break visually. I assume the following modification of the above code (pardon the duplicate) would serve the purpose:

<div style="position: relative;">
    <h1 style="position: absolute; left: 0; top: 0; max-width: 50%; overflow: hidden">What a great title</h1>
    <div style="position: absolute; right: 0; top: 0; text-align: right; max-width: 50%; overflow: hidden">
        <a href="javascript: void(0)">This link can kill you</a>
        <a href="javascript: void(0)">Click if you dare</a>
    </div>
</div>

To round off, you cannot achieve this using a straightforward CSS property combination, because with CSS (and HTML), content flows from left to right and top to bottom, or it becomes absolutely- or fixed- positioned which interrupts the flow. Anyhow, it does not want to remain on the same line, and you as the layout designer are left with resolving ambiguities such layout would introduce, such as what to do when the two trains running from each direction front-collide with each other :-)