12

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?

Nicolas Le Thierry d'Ennequin
  • 6,004
  • 5
  • 37
  • 56

5 Answers5

12

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>
Cœur
  • 37,241
  • 25
  • 195
  • 267
Tu H.
  • 496
  • 6
  • 12
6

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 :-)

Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95
  • You're right to point out the possible problem if the title or the buttons get too long (although I'm not bothered by that here). Your solution looks quite right -- in spite of the extra markup! – Nicolas Le Thierry d'Ennequin Sep 20 '12 at 11:25
0

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....

SvenFinke
  • 1,254
  • 3
  • 15
  • 30
0

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/

robd
  • 9,646
  • 5
  • 40
  • 59
-1

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>
Mat
  • 2,378
  • 3
  • 26
  • 35
  • Yes, I'd thought of that solution, but if you add `float:right`, the display property actually become `block` (says Firebug). – Nicolas Le Thierry d'Ennequin Sep 20 '12 at 10:58
  • Right. Float normally won't apply to inline elements. Maybe some browsers behave weired and the result is just what you tried to achieve... but it's wrong... – SvenFinke Sep 20 '12 at 11:05
  • I added the exmaple that I just copied from the working web page.. Hope it will help. If you add display in style explicitly it should work, I guess.. – Mat Sep 20 '12 at 11:06
  • No, your example doesn't work. If you make `H2` significantly bigger you'll see by yourself. @Gushiken is right. – Nicolas Le Thierry d'Ennequin Sep 20 '12 at 11:12
  • Ok, if you want to keep the baseline it's not possible this way.. I was not woried about baseline that much.. However if you have fixed h1 size you can edit the `line-height` in your links and adjust it to look good.. – Mat Sep 20 '12 at 11:19