HTML - Help Aligning An Image

Hello everyone, my first post here, I was wondering if anyone could help.

I'm pretty inexperienced with websites, but I've been drafted in by a friend to help the online side of his business. I've been updating his website and come up with

www.amarininn.com

However, the fading javascript image is being placed in the middle of the page in IE and in Firefox and Chrome the Booking button and other image links are sitting behind the image, not underneath it. How can I fix this?

Secondly, it seems www.amarininn.com ( the old website) is hosting malware. Is there an easy way to diagnose and fix this? I'm tempted to just format the whole thing and start afresh.

This is a great looking forum and I hope to learn a lot here. Any help with my questions would be most appreciated.

JonnieO

Hi guys
I've spent the best part of two hours attempting this and have been failing. Miserably.

What I'm trying to do is NOT to create a body background, but create an image, which will sit at the bottom of my browser window, regardless of it's size, and then go BEHIND other elements such as tables / images if my browser window size causes overlap.

All help appreciated, thanks in advance.
Antonz

hello, i've placed an image gallery to my website . i am unable to align it to the center,

Hello,

I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it?

I started with code something like

<div align="center">

<ul type="disc">
<li>Wine</li>
<li>Women</li>
<li>Song</li>
</ul>

</div>

This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed.

I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way?

Hey, im not too experienced with web design but me and a friend decided to go on an wing and try and make a flash game web page. Everything been going great till i tried adding a add to the top left of the page. Only thing i could do is set an absolute value to the div but it dose not look right in smaller resolutions.

Example script:
<div style="text-align: left; position: absolute;">
<!-- Begin BidVertiser code -->
<script language="JavaScript1.1"
src="http://bdv.bidvertiser.com/BidVertiser.dbm?pid=141137&amp;bid=341700"
type="text/javascript"></script>
<noscript><a
href="http://www.bidvertiser.com/bdv/BidVertiser/bdv_advertiser.dbm">internet
advertising</a></noscript>
<!-- End BidVertiser code --> </div>
<div style="text-align: center;"><a
href="http://pinkkittens.org/"><img alt="Banner"
src="http://pinkkittens.org/images/pinkkittenbannernew.png"
style="border: 0px solid ; width: 815px; height: 121px;"
align="top"></a></div>
<div id="flashcontent" style="text-align: center;"></div>
<script type="text/javascript">var so = new SWFObject("http://pinkkittens.org/upward.swf","upward","815","35","8","#FF88B8"); so.addParam("allowScriptAccess","always"); so.write("flashcontent");</script>

I want the banner in the middle...the navigation bar right under it and also the ad on the far left...but could only achieve this with a absolute value...any pointers?
Web address for better viewing pleasure is http://www.pinkkittens.org/

How would i go about aligning everything on a page so instead of starting on the very left of the page, it starts X amount of pixels away from the side?

Also how can i adjust the space between each line of text? Make it a bit wider or smaller..etc

I have a form i am creating for a widget to put on my website but for some reason it does not align all the way to the left instead it is off center. How do i put it to the far left?
And then there is a random box that appears in the top, how do I remov this? Thank you

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <input>
</head>
<body>
<form id="form1"
 action="https://app.realeflow.com//api/contactSubmit.aspx?id=35151&amp;type=1&amp;ar=30178"
 method="post" name="form1">
  <script type="text/javascript">// <![CDATA[
function numbersonly(myfield, e, dec) { var key; var keychar; if (window.event) key = window.event.keyCode; else if (e) key = e.which; else return true; keychar = String.fromCharCode(key); if ((key == null) || (key == 0) || (key == 8) || (key == 9) || (key == 13) || (key == 27)) return true; else if ((("0123456789").indexOf(keychar) > -1)) return true; else if (dec && (keychar == ".")) { myfield.form.elements[dec].focus(); return false; } else return false; }
// ]]></script>
  <div id="seller_opt" class="optin"
 style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 0pt; WIDTH: 477px; PADDING-RIGHT: 0pt; BACKGROUND: url(http://www.ibuyhousesinsanantonio.com/wp-content/uploads/2012/01/Untitled.png) no-repeat 0pt 50%; HEIGHT: 481px; PADDING-TOP: 55px; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial">
  <p class="text"
 style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal"   >Name:</p>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
  <input id="SellerWizard_ownerName"
 style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
 2px; font-size-adjust: none; font-stretch: normal" name="SellerWizard$ownerName" maxlength="100">

  </div>
  <p class="text"
 style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal"   >E-mail
Address:</p>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
  <input id="SellerWizard$ownerEmail"
 style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
 2px;
 font-size-adjust: none; font-stretch:
 normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerEmail" maxlength="100">

  </div>
  <p class="text"
 style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal"   >Zip
Code:</p>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
  <input id="SellerWizard$ownerZip"
 style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
 2px; font-size-adjust:
 none; font-stretch: normal" onkeydown="arrowKeyNavigate(this);" name="SellerWizard$ownerZip" maxlength="15">

  </div>
  <p class="text"
 style="PADDING-BOTTOM: 0pt; MARGIN: 2px; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; FONT: 13px Arial,Helvetica,sans-serif; COLOR: rgb(0,0,0); PADDING-TOP: 0pt; font-size-adjust: none; font-stretch: normal"   >Mobile
Phone*:</p>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">
  <input id="SellerWizard$ownerMobilePhone"
 style="BORDER-BOTTOM: rgb(0,0,0) 1px solid; BORDER-LEFT: rgb(0,0,0) 1px solid; PADDING-BOTTOM: 2px; MARGIN: 0pt 0pt 2px 0px; PADDING-LEFT: 2px; WIDTH: 155px; PADDING-RIGHT: 2px; FONT: 13px Arial,Helvetica,sans-serif; HEIGHT: 22px; COLOR: rgb(88,88,88); BORDER-TOP: rgb(0,0,0) 1px solid; BORDER-RIGHT: rgb(0,0,0) 1px solid; PADDING-TOP:
 2px; font-size-adjust: none;
 font-stretch: normal"
 onkeypress="return numbersonly(this, event)" name="SellerWizard$ownerMobilePhone" maxlength="25">
&nbsp;
  </div>
  <div style="PADDING-BOTTOM: 0pt; PADDING-LEFT: 100px; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <input
 id="SellerWizard_FinishNavigationTemplateContainerID_FinishButton"
 class="submit" style="MARGIN: 0pt 0pt 0pt 25px"
 onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("SellerWizard$FinishNavigationTemplateContainerID$FinishButton", "", true, "", "", false, false))'
 name="SellerWizard$FinishNavigationTemplateContainerID$FinishButton"
 value="Finish"
 src="http://api.ning.com/files/2FjYylCa-7----tgtm1C84N-wASg37E3PmRpOeW5GET9uz4-SqDzfp9Xn7pslOJrglrucDsLut3pJXluZymZKd-mGJj0vi26/submitbutton.jpg"
 type="image"><br>
*Optional
  </div>
  </div>
</form>
<br>
</body>
</html>

You can see where it doesnt align on the website and another view of it not being where it is suppose to be in an html editor, thanks for any help!

So I'm working on a <dl> and using this bit of code as an example:


<style type="text/css">dl{ border: 3px double #ccc; padding: 0.5em; } dt { float: left; clear: left; width: 100px; text-align: right; font-weight: bold; color: green; background-color:yellow;} dt:after { content: ":"; } dd { margin: 0 0 0 110px; padding: 0 0 0.5em 0; }
</style>

<dl>

<dt>first item</dt>
<dd>definition for first item in list</dd>
<dt>second item</dt>
<dd>definition for second item in list<br>
extending across more than one line</dd>
<dt>third item</dt>

<dd>definition for third item in list</dd>
</dl>

That bit works exactly like you'd expect it to. However, when I apply it to my own list I run into a problem and i can't see the problem. Here's the link to my page:

http://site.outletpccomputerrepair.c...opups/test.htm

whenever I have a second line of <dd>, the alignment messes up. I can't see what to do in order to get the <dd> elements to align properly whenever there's a second line. Please help!

I have a HTML file with two pictures on. They are like title lines. I need the one to be pushed right up to the top-left, and the other one to strech all the way across. I have a screenshot:

http://img80.imageshack.us/img80/6827/screenshotjs.png

Have a look. The lines are two pictures, they are split close to the middle.

Hello all!

After editing my 26 pages to a new format, i saw that some buttons isn't correct in either IE and/or Firefox. Below you see an example of what i mean. Click on it to view Full resolution


I heard something about that Internet Explorer shows the .png format an other way than Firefox and that's probaly the problem. Well, here is the code of "Images.html"

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">	
<html>

<head>
	<title>Urne's Website - Images & Pictures</title>
	<link rel="stylesheet" type="text/css" href="style/Classic.css">
	<link rel="icon" href="U.ico" type="image/x-icon" />
</head>

<body>
	<div id="container">
		<div id="header"></div>

		<div id="left" style="width:210px;float:left;">
			<a href="index.html"><img id="Homebut" alt="Home (15K)" src="img/linky.png" height="50" width="200" border= "0px"/></a>
			<p><a href="Community.html"><img id="Cobut" alt="Community (15K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Tracks.html"><img id="Tracksbut" alt="Tracks (17K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Videos.html"><img id="Videosbut" alt="Videos (15K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Images.html"><img id="imagesbut" alt="Images (15K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Other.html"><img id="Otherbut" alt="Other (13K)" src="img/linky.png" height="50" width="200" border= "0px"/></a><p/>
			<p><a href="Models.html"><img id="Modelsbut" alt="3D Models" src="img/linky.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Settings.html"><img id="Setbut" alt="Settings (13K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p>
			<p><a href="Search.html"><img id="Searchbut" alt="Search (14K)" src="img/linky.png" height="50" width="200" border= "0px"/></a><p>
			<p><a href="About.html"><img id="Aboutbut" alt="About (12K)" src="img/linky.png" height="50" width="200" border= "0px"/></a></p> 
		</div>

		<div id="main" style="margin-left: 210px;">
			<h1>Re-Volt Images</h1>

			<img alt="RV Vista Icon" src="img/RV+Vista.png" align="right" border= "0px"/>
			<p><b><u><h3>Re-Volt Vista Icon</h3></u></b></p>

			<p>I was bored, and i thought that the good old re-volt icon needed a graphical update, so i decided to make this cool icon.
			Do only download for personal use please!</p>
			<p><a href="img/RV+Vista.png"><img id="Typeimg"alt="Image" src="img/linky.png" align="right" border= "0px"/></a>
			<a href="img/RV+Vista.ico"><img id="Typeico"alt="Icon" src="img/linky.png" align="right" border= "0px"/></a></p>

			<hr style="clear: right;" />
			<img alt="Happy Holidays" src="img/HolidaysThumbnail.jpg" align="right" border= "0px"/>
			<p><b><u><h3>Happy Holidays!</h3></u></b></p>
			<p>Happy Holidays! was originally a picture i took for the 2nd RRR logo contest, 
			but i choosed an other picture instead of this one and then i made it to what the picture now is. 
			A really lucky shot, if you ask me.<img alt="smiley" src="img/smile.gif" border= "0px"/> 
			<p><a href="img/Holidays800x600.jpg"><img id="LowRes" alt="Happy Holidays 800x600" align="right" src="img/linky.png" border= "0px"/></a>
			<a href="img/Holidays+fs.jpg"><img id="FullSize" alt="Happy Holidays Full Size" align="right" src="img/linky.png" border= "0px"/></a></p>

			<hr style="clear: right;" />
			<img alt="Other Pisa Grandprix GFX" src="img/new+pisa.png" height="200" width="200" align="right" border= "0px" style="margin-bottom: 10px;" />
			<h3>Other Pisa Grandprix GFX</h3>
			<p>Before me &amp; Crone made the update pack for Pisa Grandprix, Crone took this nice picture, to use as GFX for Pisa Grandprix.
			Please feel free to download, if you like this one better than the 2 other images!</p> 
			<p><a href="img/new+pisa.png"><img id="FullSize" alt="Full Size" src="img/linky.png" align="right" border= "0px"/></a></p>
		</div>

	</div>

</body>

</html>

How do i align each button so it is exactly same place no matter how much text i wrote above?

Please can someone help me with html code to align boxes in code below. Boxes are all out of line at the moment. I have read that it is best to create a table, however I am really new to html and not sure how to do that.

Thank you
James


HTML Code:

	<fieldset> 
<br> 
		<div> 
			<input type="hidden" name="sexuality" value="1"> 
		</div> 
		<div> 
			<label>I'm a:</label> 
			<select name="gender"> 
				<option value="1" selected>man looking for a woman</option> 
				<option value="2">woman looking for a man</option> 
			</select> 
		</div> 
		<div> 
<br>
			<label>First name:</label> 
			<input name="firstname" type="text"> 
		</div> 
		<div>
<br> 
			<label>D.O.B.:</label> 
			<select name="dobday"> 
				<option value="">Day</option> 
				<option value="1">01</option> 
				<option value="2">02</option> 
				<option value="3">03</option> 
				<option value="4">04</option> 
				<option value="5">05</option> 
				<option value="6">06</option> 
				<option value="7">07</option> 
				<option value="8">08</option> 
				<option value="9">09</option> 
				<option value="10">10</option> 
				<option value="11">11</option> 
				<option value="12">12</option> 
				<option value="13">13</option> 
				<option value="14">14</option> 
				<option value="15">15</option> 
				<option value="16">16</option> 
				<option value="17">17</option> 
				<option value="18">18</option> 
				<option value="19">19</option> 
				<option value="20">20</option> 
				<option value="21">21</option> 
				<option value="22">22</option> 
				<option value="23">23</option> 
				<option value="24">24</option> 
				<option value="25">25</option> 
				<option value="26">26</option> 
				<option value="27">27</option> 
				<option value="28">28</option> 
				<option value="29">29</option> 
				<option value="30">30</option> 
				<option value="31">31</option> 
			</select> 
			<select name="dobmonth"> 
				<option value="">Month</option> 
				<option value="1">January</option> 
				<option value="2">February</option> 
				<option value="3">March</option> 
				<option value="4">April</option> 
				<option value="5">May</option> 
				<option value="6">June</option> 
				<option value="7">July</option> 
				<option value="8">August</option> 
				<option value="9">September</option> 
				<option value="10">October</option> 
				<option value="11">November</option> 
				<option value="12">December</option> 
			</select> 
			<select name="dobyear"> 
				<option value="">Year</option> 
				<option value="1990">1990</option> 
				<option value="1989">1989</option> 
				<option value="1988">1988</option> 
				<option value="1987">1987</option> 
				<option value="1986">1986</option> 
				<option value="1985">1985</option> 
				<option value="1984">1984</option> 
				<option value="1983">1983</option> 
				<option value="1982">1982</option> 
				<option value="1981">1981</option> 
				<option value="1980">1980</option> 
				<option value="1979">1979</option> 
				<option value="1978">1978</option> 
				<option value="1977">1977</option> 
				<option value="1976">1976</option> 
				<option value="1975">1975</option> 
				<option value="1974">1974</option> 
				<option value="1973">1973</option> 
				<option value="1972">1972</option> 
				<option value="1971">1971</option> 
				<option value="1970">1970</option> 
				<option value="1969">1969</option> 
				<option value="1968">1968</option> 
				<option value="1967">1967</option> 
				<option value="1966">1966</option> 
				<option value="1965">1965</option> 
				<option value="1964">1964</option> 
				<option value="1963">1963</option> 
				<option value="1962">1962</option> 
				<option value="1961">1961</option> 
				<option value="1960">1960</option> 
				<option value="1959">1959</option> 
				<option value="1958">1958</option> 
				<option value="1957">1957</option> 
				<option value="1956">1956</option> 
				<option value="1955">1955</option> 
				<option value="1954">1954</option> 
				<option value="1953">1953</option> 
				<option value="1952">1952</option> 
				<option value="1951">1951</option> 
				<option value="1950">1950</option> 
				<option value="1949">1949</option> 
				<option value="1948">1948</option> 
				<option value="1947">1947</option> 
				<option value="1946">1946</option> 
				<option value="1945">1945</option> 
				<option value="1944">1944</option> 
				<option value="1943">1943</option> 
				<option value="1942">1942</option> 
				<option value="1941">1941</option> 
				<option value="1940">1940</option> 
				<option value="1939">1939</option> 
				<option value="1938">1938</option> 
				<option value="1937">1937</option> 
				<option value="1936">1936</option> 
				<option value="1935">1935</option> 
				<option value="1934">1934</option> 
				<option value="1933">1933</option> 
				<option value="1932">1932</option> 
				<option value="1931">1931</option> 
				<option value="1930">1930</option> 
				<option value="1929">1929</option> 
				<option value="1928">1928</option> 
				<option value="1927">1927</option> 
				<option value="1926">1926</option> 
				<option value="1925">1925</option> 
				<option value="1924">1924</option> 
				<option value="1923">1923</option> 
				<option value="1922">1922</option> 
				<option value="1921">1921</option> 
				<option value="1920">1920</option> 
				<option value="1919">1919</option> 
				<option value="1918">1918</option> 
				<option value="1917">1917</option> 
				<option value="1916">1916</option> 
				<option value="1915">1915</option> 
				<option value="1914">1914</option> 
				<option value="1913">1913</option> 
				<option value="1912">1912</option> 
				<option value="1911">1911</option> 
				<option value="1910">1910</option> 
				<option value="1909">1909</option> 
			</select> 
		</div> 
 
		<div> 
<br>
			<label>Email:</label> 
			<input name="email" type="text"> 
		</div> 
			
		<div> 
<br>			<label>Password:</label> 
			<input name="password" type="password" value=""> 
		</div> 
 
		<div>

I'm trying to align my link in the center of the page, but from some reason it still appears left. Here's the code I'm using-

Code:

<a href="http://or-bar.tripod.com/wheeloftime.html" align="center">Next</a>

What am I doing wrong?

Hello there i have just created a simple website using div tags as layers to position link elements on the page. I have 2 pages the first page has an image link that takes the user to the second page and the image link has been aligned in a div tag to position it onto the screen. When i test the first page in most browsers the aligning seems to be perfect and is aligning well in all browsers.

The problem im facing is on the second page, i have done exactly the same procedure to align a form element and an image link but when published and previewed in safari it is aligned perfectly but in most other browsers the div aligning for the form and the image link are not aligned at all. i cant figure out this problem because the first page is done exactly the same way and that works in all browsers, could someone please please have a look for me its probably something really simple but i cant see it. Below is the source code for both page 1 with the aligning in all browsers image link, and the second page the one that needs to be positioned correctly in all browsers:

(PAGE 1 THE IMAGE LINK ON THIS PAGE ALIGNS CORRECTLY IN ALL BROWSERS AND IS FIN)

<HTML>
<HEAD>
<TITLE>HARMONIC WEBSITE p1guides</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

</HEAD>

<BODY BGCOLOR="BLACK" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 >

<div align="center">


<div style="background-image:url('Background.jpg'); width:1024px; height:768px; background-repeat: no repeat; z-index: 0;">



<div style="z-index: 1; align: right; padding-top: 517px; padding-left: 273px;>

<a href="index.html></a> <a href="page2.html"><IMG SRC="images/index_19.jpg" BORDER=0 WIDTH=219 HEIGHT=44 ALT=""></a>

</div>



</div>


</div>


</BODY>
</HTML>



(PAGE 2 THE FORM AND IMAGE LINKS ARE POSITIONED EXACTLY THE SAME AS PAGE 1 BUT APPEAR TO BE OUT OF POSITION IN DIFFERENT BROWSERS?)



<HTML>
<HEAD>
<TITLE>HARMONIC WEBSITE p2guides</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#000000 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (HARMONIC WEBSITE p2guides.psd) -->

<BODY BGCOLOR="BLACK" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 >

<div align="center">


<div style="background-image:url('Backgroundp2.jpg'); width:1024px; height:768px; background-repeat: no repeat; z-index: 0;">






<div style="z-index: 1; padding-top: 260px; padding-left: 700px;>




<TABLE WIDTH=328 BORDER=0 CELLPADDING=0 CELLSPACING=0 >

<TD IMG SRC="form background.jpg" WIDTH=328 HEIGHT=248 BORDER=1 ALIGN="LEFT">



<form action="mailto:YOUR EMAIL ADDRESS" method="post" enctype="text/plain" border=0 >
<br>
<input type="text" name="name"
value="" size="30">
<br><br>


<input type="text" name="Position/primary specialty"
value="" size="30">
<br><br>
<input type="text" name="Number of patients treated"
value="" size="5">
<br><br>

<input type="text" name="Hospital"
value="" size="30">
<br><br>

<input type="text" name="Email address"
value="" size="25">
<br><br>

<a href="page3.html">
<input type="submit" value="Send">
<a>
<input type="reset" value="Reset">

</form>

</TD>


</div>
<div style="z-index:2; padding-top: 66px; padding-left: 520px; margin-top: 0px;>

<a href="index.html></a> <A HREF="http://www.harmonic.com">

<IMG SRC="p2-click_15.jpg" BORDER="0" WIDTH=46 HEIGHT=21 ALT=""></A>
</div>
</div>
</BODY>
</HTML>

Hi,
For a web page I'm creating with php I'm trying to align two <div> tags next to each other. I'm thinking I want to use float, but I'm unsure how. Here is what I have so far.
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" 
		content="text/html; charset=iso-8859-1" />
</head>

<body>

	<div style="text-align: center; id="header">
		<p>This is the header placeholder</p>
	</div>

	<div style="text-align: center; id="button_nav">
		<p>This is the button navigation placeholder</p>
	</div>

	<div style="text-align: left; id="text_nav">
		<p>This is the text navigation placeholder</p>
	</div>

	<div style="text-align: right; id="content">
		<p>This is the dynamic content placeholder</p>
	</div>

	<div style="text-align: center; id="footer">
		<p>This is the footer placeholder</p>
	</div>

</body>
</html>

Any pointers are welcome. Thanks.