My div is not expanding to display static text

I have just started developing a new website and thought I would have a go at using a “reset” set of styles to start off with a clean slate so to speak. I have immediately run into problems with just a simple test file where a div containing some text is not expanding to include the text content. Any help on why this happening is much appreciated.

Here is the CSS I am using:



/*****************************
RESET STYLES
*****************************/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/****************************
SITE STYLES
****************************/


body {
	font:12px/18px arial;
	background:#d0d2d8;
	color:#444444;
}

div {
	border: 1px solid black;
}


div.oswald {

		 font-family: 'Oswald', sans-serif;
		 font-size:60px;
		
		
}



And the HTML is as follows:



<html>
  <head>
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

   <link rel="stylesheet" href="/css/styles.css" type="text/css" charset="utf-8">

    <style>
      body {


      }

	div.oswald {

		 font-family: 'Oswald', sans-serif;
	}



    </style>
  </head>
  <body>

	
    	<div class="oswald">
		Oswald
	</div>



  </body>
</html>


Hi,

You set the body line-height to 18px and yet you set the font to 60px. A font that doesn’t fit in the line-height will just stick out as is happening with your layout.

As a rule of thumb set your line height in either ems or a unitless line-height so that it grows with the font size of the element it contains.

e.g.


body {
[B]	font:12px/1.5 arial;
[/B]	background:#d0d2d8;
	color:#444444;
}
div { border: 1px solid black; }
div.oswald {
font-family: 'Oswald', sans-serif;
font-size:60px;
}


Preferably use percent for the default font-size anyway and not px .

Thank you Paul and sorry for the delay in replying due to the notification going into my SPAM folder.

Doh that line height must have been copied in from the template I was given with the reset css code and I had not noticed it. Next time I should spend more time checking my code before reaching out for help.

Anyway all working now - thanks.

And thanks for the tip on using ems