Forum Moderators: not2easy
I'm struggling with a little problem in that I'd like to have left and right aligned text on the same line, but can't figure out how to do it. This is what I have currently and the items display on different lines.
<div class="author">John Doe (left)
<div class="pdf"><img src="img/pdf-icon.png" width="16" height="16" alt="PDF Version" /> <a href="test.pdf" title="Get the PDF Version">Get the PDF Version (right)</a></div></div>
Any help would be much appreciated.
Duncan
Marshall
Oh... and control the DISPLAY of the whole section (to do this, I've declared a wrapper div, called authorAndPdfWrapper)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>edit the title</title>
<style type="text/css">
.authorAndPdfWrapper {
display:block;
clear:both;
}
.author {
background:#f00;
}
.pdf {
float:right;
background:#ff0;
}
</style>
</head>
<body>
<h1>
hello world
</h1>
<p>
Lorem ipsum dolor sit amet
</p>
<div class="authorAndPdfWrapper">
<span class="pdf">
<img src="img/pdf-icon.png" width="16" height="16" alt="PDF Version">
<a href="test.pdf" title="Get the PDF Version">
Get the PDF Version (right)</a>
</span>
<div class="author">
John Doe (left)
</div>
</div>
<p>
Nam commodo libero nec justo.
</p>
</body>
</html>
