Floated H1 & H2 not lining up in responsive layout

[dannygreen]

Basically I have a header with a logo floated left with a h1 and h2 to its right hand side, it is a responsive layout therefore the margin-left for both the h1/h2 are set as %. However, as you can see here http://airporthopperuk.com/danny/ the h2 is too far to the right, even though they both have the same margin-left value, also when you drag the browser window inwards, the h2 seems to be ‘racing’ the h1 to the logo rather than moving in together. Could this be caused by me having the h2 set as text-align:centre ?

this is my css:

header {

height:12.1875em;

width:100%;

background-color:#cd3c1e;

}



#logo {

margin-left:18.887755%;

margin-top:2.1875em;

float:left;

}



h1.title {

font-family:'Signika', sans-serif;

font-weight:200;

color:#fff;

font-size:2.896875em;

margin-left:53.06122%;

padding-top:45px;

}



h2.subtitle {

font-family:'Signika', sans-serif;

font-weight:200;

color:#fff;

font-size:0.96em;

margin-left:53.06122%;

margin-top:15px;

text-align:center;

}

Thanks
Danny

[Anonymous]

The h2 being set to text-align: center is exactly the issue. Set the background to #369 (or similar) to see what is going on. Either setting the h1 to the same text alignment, or setting the width of the h2 to match the width of the h1 should fix it (300px).

[dannygreen]

Thanks for your help,
Is there a better way i could do this? I would like to avoid using pixel based width values if possible and would like to have a ‘real’ margin-left value rather than one I’ve made up to bodge this issue.

Thanks

[Anonymous]

Why not make your header the same width as your content is going to be and position your h1/h2 to the right? If you want your h2 text to be centrally aligned under your non-centered h1 text, then I’m pretty sure you will need to dictate the width. Sorry.

[dannygreen]

Sorted it thanks, by using a wrapper with width:100% and max-width:980px. Thanks

[Author]

Posts