I ran into an issue while designing a web page using em units. I thought I had a good grasp of it, but when I tried to align two separate span tags with margin-left, they ended up overlapping in the upper-left corner of my header. Even though I used display:block to stack them on top of each other, I couldn't get them to align properly using margin-right. Despite applying the same value for margin-right, the larger span and the smaller one just wouldn't line up correctly.
- Could this be due to my use of em's?
- How should I go about fixing this problem?
For better context, I've included the code snippet below to show you exactly what I'm dealing with. Hopefully, my explanation makes sense.
HTML
<div class="header1">
<span class="title">Title goes here</span>
<span class="subtitle">This is the subtitle</span>
</div>
CSS
body {
color: #333;
font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
font-size: 62.5%; /* 10px */
line-height: 1.28;
}
.main1 {
width: 96em;
/* horizontally center the website layout */
margin: 0 auto; margin-top: .8em;
text-Align: left; /* override body {text-align:center} */
}
div.header1 {
clear: both;
width: 100%;
height: 9em;
background: #ff0000;
color: #fff;
}
.title {
font: small-caps 700 3.7em "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;
}
.subtitle {
font-weight: lighter;
font-size: 1.4em;
}