2

Let say i would like to cover the below 2 scenario (the title is dynamic) : Could that be achieved with CSS only (no JS) for IE8+ ?

Scenario A : short header title to be aligned center relatively to the page width

| back button |                 short Title                             |
<-----------------------------------|----------------------------------->

Scenario B : very long header title to fill the header content area without being overlayed on the back button

|             | Very very very very very very very very very very very  |
| back button | Very very very very very very very very long Title      |
<-----------------------------------|----------------------------------->
seb
  • 425
  • 5
  • 16

1 Answers1

0

Two ways I can think of:

Float the back button left, and the title will wrap naturally.

HTML

<div>

    <a href="#" class="back">Back</a>

    <h1>Title</h1>

</div>

CSS

div {
    text-align: center;
}

a.back {
    float: left;
    margin-right: 20px;
}

Or this way, same HTML - Just realised this wont center things properly, unless you have the same 100px padding on the right hand side as well.

div {
    position: relative;
    min-height: 30px;
    padding-left: 100px;
    text-align: center;
}

a.back {
    position: absolute;
    top: 50%; left: 0;
    width: 90px;
    height: 30px;
    margin-top: -15px;
}

That second one will avoid any wrapping issues and also vertically align the button in the middle.

Hope that helps :)

will
  • 4,557
  • 6
  • 32
  • 33
  • thanks Will, it seems the title is not aligned centered relatively to the total width of the page but rather total width - back button width. Anything i am missing here ? @see http://jsfiddle.net/fhrQX/1/ – seb Feb 29 '12 at 12:03
  • Sorry, my mistake, I'm not sure this is possible. The browser must calculate the center point on a per-line basis so even when it's wrapping text round a float the center point is still in the middle of that actual line. This may be your best compromise: http://jsfiddle.net/will/fhrQX/14/ – will Feb 29 '12 at 15:23