jquery - Is it possible to center-align a header but left-align a subtitle to the left side of the header, preferably without JavaScript? -

how can 1 accomplish following, preferably without javascript.

|                                                                               | |                 h1. centered bold, large font title                 | |                 h4. small byline left-aligned                            | |                                                                               | |  p. regular text left-aligned in nice paragraphs. lorem ipsum dolor sit amet, | |  consectetur adipiscing elit. praesent pretium leo id venenatis lobortis.     | |  mauris imperdiet luctus leo nec malesuada. morbi nisl dolor, faucibus ut     | |  condimentum nec, sollicitudin @ dolor.                                      | |                                                                               | 

i haven't tried yet, expect determine left of h1 element , use javascript manually position h4. i'd see if there's more elegant solution first.

this rob adams suggesting.

http://jsfiddle.net/wusg9/5/

css

.heading {      left: 50%;      display: inline-block;      position: relative; } .heading h1, .heading h4 {      right: 50%;      position: relative; } 

html

<div class="heading">      <h1>top heading</h1>      <h4>sub heading</h4> </div> 

they key working floating .header div or setting inline-block doesn't take more space needs to. push left 50% of screen , pull right 50% of that.