Need Text Inline With Image - CSS problem?

I have this code in the body of a webpage I'm making:

Code:

<div class="full"><span class="deskur"><img src="images/deskur.JPG" style="margin-top: 10px"><div class="style1">Mr. David Deskur<br>President</div></span></div>

The style applied to this page is as follows:

Code:

body {
	background-color: #100066;
	background-image: url(images/background.jpg);
	background-position: center;
	background-repeat: repeat-y;
	margin: 0 auto 0 auto;
	text-align: center;
	width: 700px;
}

div.statement {
	background-color: tan;
	display: block;
	height: 252;
}

div.full {
	background-color: #666699;
	display: block;
	margin: 0 auto 0 auto;
	text-align: left;
	width: 86%;
}

span.full {
	background-color: tan;
	display: block;
	margin 0 auto 0 auto;
	text-align: left;
	width: 86%;
}

span.deskur {
	background-color: #666699;
	display: block;
	margin-top: 10px;
	text-align: center;
	width: 153px;
}

img {
	border: 0;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

.style1 {
	color: #FFFFFF;
	font-family:arial;
	font-weight: bold;
}

Now, I cannot get text to go inline with this, no matter where I place it. In a SPAN, in a DIV (yes, I know it adds line breaks - I'm trying everything I can here!). I also know that I shouldn't have them displaying as blocks, but any other way causes problems. Can anyone advise on how to create another block to the right (and NOT below) my image and caption?

Thanks,

Milty

 

put a table in lol

or use absolute positioning.

 

No! No tables!
I had my layout done up with tables, and it bit me in the butt (maybe that's why you're laughing?) See this link

As for absolute positioning, how would that work? I chose a pixel location from the top left of the window... how do I make that compatible across browsers and screen resolutions?

 

I would be tempted to play with a <dl> element and see if you can get the correct effect with that. Or possibly a <ul> with lots of styling. That seems to be the sort of data you're trying to represent, so that would be an added bonus

BTW are you familiar with the CSS float rule? If not you should be Also, clear: is a good one to know too.

 

Thanks, all! I managed to get it working correctly! I did use a table after all (although not for what I had originally intended), as well as an unordered list. Below is the HTML and CSS:

Code:

<div class="deskur"><table align="left"><tr><td><img src="images/deskur.JPG" style="margin-top: 5px;" align="left" alt="Mr. David Deskur" /></td></tr><tr><td><span class="style1"><b>Mr. David Deskur</b><br />President</span></td></tr></table></div><span class="statement">A Statement From The President<br /></span><hr style="margin-left: 5px;" /><span class="style1"><b>At CGL we strive to follow specific principles<br />While remaining a profitable enterprise, we will:</b></span><ul><li>Be customer oriented, providing maximum value in a professional manner</li><li>Be a growing and progressive company using technology to create quality and efficiency</li><li>Maintain a climate of mutual respect for employees, customers and vendors</li><li>Provide a clean, safe and healthy environment for employees to work in</li><li>Be an excellent corporate citizen, known in the community as a desirable place to work in and do business with</li></ul>

Code:

body {
	background-color: #100066;
	background-image: url(images/background.jpg);
	background-position: center;
	background-repeat: repeat-y;
	margin: 0 auto 0 auto;
	text-align: center;
	width: 600px;
}

a.zoom {
	background-color: #666699;
	color: #FFFFFF;
	font-family: arial;
	height: 32px;
	display: block;
}

a:link#contact {
	color: #FFFF00;
}

a:visited#contact {
	color: #FFFF00;
}

a:hover#contact {
	color: #FFFFFF;
}

a:active#contact {
	color: #FFFF00;
}

div.banner {
	background-color: #666699;
	display: block;
	margin: 0 auto 0 auto;
	text-align: left;
	width: 100%;
}

div.deskur {
	background-color: #666699;
	display: inline;
	text-align: center;
	width: 153px;
}

span.statement {
	background-color: #666699;	
	color: #FFFF00;
	display: block;
	font-family: arial;
	font-size: 24px;
	font-weight: bold;
	margin-top: 5px;
	overflow: auto;
	text-align: center;
	width: 447px;
}

span.title {
	background-color: #666699;	
	color: #FFFF00;
	display: block;
	font-family: arial;
	font-size: 20px;
	font-weight: bold;
	margin-top: 5px;
	overflow: auto;
	text-align: left;
	width: 600px;
}

table {
	border: 0;
	margin: 0;
	padding: 0;
}

form {
	display: block;
	margin-top: 10px;
}

input {
	margin: auto 10px auto 10px;
	width: 115px;
}

select {
	margin: auto 10px auto 10px;
	width: 122px;
}

ul {
	color: #FFFFFF;
	font-family: arial;
	font-weight: bold;
	margin-left: 135px;
	padding-left: 40px;
	text-align: left;		
}

img {
	border: 0;
	margin: 0;
	padding: 0;
}

.style1 {
	color: #FFFFFF;
	font-family:arial;
}

.style2 {
	background-color: #666699;
	color: #FFFF00;
	display: block;	
	font-family:arial;
	height: 19px;
	text-align: left;
}

.style3 {
	background-color: #666699;
	color: #FFFFFF;
	display: block;	
	font-family:arial;
	font-size: 12px;
	font-style: italic;
	text-align: left;
}

.style4 {
	background-color: #666699;
	color: #FFFFFF;
	display: block;	
	font-family:arial;
	font-size: 12px;
	margin-bottom: 5px;
	text-align: left;
}