Display img and p on one line

Trying to get my img and p to display inline next to each other how do I do this? Thanks.

<!DOCTYPE html>
<html charset="UTF-8">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Test</title>
	<link rel="stylesheet" type="text/css" href="styles/styles.css" />	

	<!--[if lt IE 7]>
		<style type="text/css">
			#wrapper { height:100%; }
		</style>
	<![endif]-->
	
</head>

<body>

	<div id="wrapper">
		
		<div id="header">
		</div><!-- #header -->
		
		<div id="header-compact">
			<img src="imgs/kevinbarlow.png" />
			<p>Building Contractor</p>
			<p>Key West, Florida</p>
		</div>
		
		<div id="content">
		</div><!-- #content -->
		
		<div id="footer">
		</div><!-- #footer -->
		
	</div><!-- #wrapper -->
	
</body>

</html>

Open in new window


html,
body {
	margin:0;
	padding:0;
	height:100%;
}
html{
	background: url(S12_Blueprints.gif) no-repeat center center fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#wrapper {
	min-height:100%;
	width: 100%;
	position:relative;
}
#header {
	background:#000000;
	padding:10px;
	border-bottom: 2px solid red;
}
#header-compact{
	height: 75px;
	max-width: inherit;
	margin: 0 auto;
}
#header-compact img p{
	display: inline-block;
}
#content {
	min-width: 100%;
	height: 500px;
	border: 1px solid black;
}

#footer {
	background:#ffab62;
	width:100%;
	height:100px;
	position:absolute;
	bottom:0;
	left:0;
	border: 1px solid black;
}

Open in new window

centemAsked:
Who is Participating?
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
change

<div id="header-compact">
                  <img src="imgs/kevinbarlow.png" />
                  <p>Building Contractor</p>
                  <p>Key West, Florida</p>
            </div>

to

<div id="header-compact">
                  <p>
                             <img src="imgs/kevinbarlow.png" />
                        Building Contractor
                         </p>
                  <p>Key West, Florida</p>
            </div>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.