Two font sizes in one DIV?

I'm making a DIV that has two lines of text which are centered and vertically aligned with line-height to make them appear in the middle.

The problem is that I want the first line of text to have a font of 3.5em, and the second line 1.8em.
I've tried to put the second line in a paragraph with a class, but the font and line height become very large.

What is the proper way to achieve that?

n0m4d

Newbie Poster

10 posts since Nov 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

0

You could use a tag or (this may not be cross-browser compatible) you can use the first-line pseudo-selector on the div like so

div#someID { font-size: 1.8em; }
div#someID:first-line { font-size: 3.5em; }

ShawnCplus

Code Monkey

Team Colleague

1,583 posts since Apr 2005

Reputation Points: 526

Solved Threads: 268

2 Years Ago

0

thanks for the suggestion ShawnCplus but that didn't work. It actually made both fonts very large.

I did put the body font as 62.5% to make this as a common basic font in all browsers. Could that be an issue?

n0m4d

Newbie Poster

10 posts since Nov 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

Show Comments

1

Nomad,

I would do it with and tags, thus making the two lines independent of each other. I think you will find that the :first-line approach will superimpose its 3.5em on the 1.8em already applied, effectively giving (1.8 * 3.5)em or 6.3em.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
body { font-family: ariel; }
#someID {
	/* General style for the div here */
}
#someID h1, #someID h2 {
	margin: 0;
	font-weight: normal;
}
#someID h1 { font-size: 3.5em; }
#someID h2 { font-size: 1.8em; }
</style>
</head>

<body>

<div id="someID">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</div>

</body>
</html>

Note that the CSS directives include margin:0 to suppress 's and 's natural vertical spacing behaviour. does the same.

You will need to apply some directive to achieve vertical alignment but from what you say, you already know how to do that. (Several approaches are available).Airshow

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

2 Years Ago

0

Nice, thanks Airshow. That worked great.

n0m4d

Newbie Poster

10 posts since Nov 2009

Reputation Points: 10

Solved Threads: 0

Two font sizes in one DIV?

This question has already been solved