I am trying to get 2 styles of text into a container where size defined large enough for text. It always ><h1 class="it">text always shows up on another line.
CSS:
#wrapper2 { height:180px; float: left; width: 78%; margin: 10px; border: 5px solid #000000;background-color: orange;padding:10px}

h1 { color: #0000FF; margin: 0 0 3px; 0;font-size:60px;float:top left;}

.it {font-style: italic;}

.smaller {font-size:30px;font-style:italic;}

HTML:
<div id="wrapper2">
<h1>B Eli Fishpaw</h1><h1 class="it">Architect</h1>
<h1 class="smaller">Conservation Design Consultant</h1>
</div>

Your help will be appreciated.
Eli

Change this line



to this:



Also, it is not good to have more than one instance of <h1> on the same page, so I would write the css like this:



and the html like this:



The margin-top: 0; has been put in to reduce the gap between the h1 and h2 headings, which otherwise would have been a great deal larger.