CSS - Align Text In Select Option

Hi there,
ahhhh I have just decided to start using Firefox and now am rreworking my site. All new set up issues to try and fix and i don't even know where to start. Here is my site: www.kohlrbaby.com
The issues:
1) nav bars are no longer positioned correctly vertically, nor can I get the text to center in FF
2) the white box extends longer then it should in FF vs IE
3) the text is extending off the white box in the catalogue area in FF
please please offer me some css insight

here is my .css code:
BODY {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 0px;
PADDING-BOTTOM: 0px;
margin:0px auto;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #a1b7d2;
SCROLLBAR-FACE-COLOR: #a1b7d2;
SCROLLBAR-ARROW-COLOR: #003366;
SCROLLBAR-TRACK-COLOR: #cccccc;
FONT-FAMILY: verdana, helvetica, arial, sans-serif;
BACKGROUND-COLOR: #a1b7d2;
TEXT-ALIGN: center;
COLOR: black;
FONT-SIZE: 12px;
}
#menuList {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}
#menuList UL {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px
}
#menuList LI {
DISPLAY: inline;
LIST-STYLE-TYPE: none
}
A.actuator {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FONT-SIZE: 9px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
COLOR: #000;
PADDING-TOP: 0px;
BACKGROUND-COLOR: transparent;
TEXT-DECORATION: none
}
A.actuator:hover {
COLOR: #958550
}
.menu {
BORDER-RIGHT: #ccc 1px solid;
BORDER-TOP: #ccc 1px solid;
VISIBILITY: hidden;
BORDER-LEFT: #ccc 1px solid;
COLOR: #000;
BORDER-BOTTOM: #ccc 1px solid;
POSITION: absolute;
BACKGROUND-COLOR: #ffffff
}
.menu LI A {
PADDING-RIGHT: 10px;
DISPLAY: block;
PADDING-LEFT: 10px;
FONT-SIZE: 9px;
PADDING-BOTTOM: 0px;
MARGIN: 0px; COLOR: #000;
LINE-HEIGHT: 1.75em;
PADDING-TOP: 0px;
BACKGROUND-COLOR: #ffffff; T
EXT-DECORATION: none
}
.menu LI A:hover {
COLOR: #eee;
BACKGROUND-COLOR: #a1b7d2

}
SPAN.key {TEXT-DECORATION: underline}
#homeMenu {WIDTH: 100px}
#catalogueMenu {WIDTH: 100px}
#wholesaleMenu {WIDTH: 100px}
#wheretobuyMenu {WIDTH: 100px}
#contactMenu {WIDTH: 100px}

A {FONT-WEIGHT: normal;
COLOR: #000000;
TEXT-DECORATION: none
}
A:visited {COLOR: #000000}
A:hover {COLOR: #958550}
A.set1:link {text-decoration: none; color: #7c8895 }
A.set1:visited {text-decoration: none; color:#990000}
A.set1:hover {text-decoration: none; color:#958550}


#navHeader {
PADDING-TOP: 0;
HEIGHT: 110px;
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
WIDTH: 650px;
POSITION: relative;
BORDER-BOTTOM: #000000 1px solid;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: center;
z-index: 10;


}
#logoHolder{
position: relative;

}
img.nav_left{
float: left;


}

#smallLogo {

POSITION: relative;
top: 30px;
left: -145px;
font size: 11px;
font-weight: bold;
}

div.gray_layer {
background:#cccccc;
height: 20px;
width: 650px;
border: solid #000000;
border-right-width: 0px;
border-left-width: 0px;
border-top-width: 1px;
border-bottom-width: 1px;
position: relative;
text-align: center;
z-index: 50;
top: 56px;


}
#second_links {
FONT-SIZE: 9px;
TEXT-ALIGN: center;
position: relative;
top: 58px;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
margin:0px auto;

}

#navImageBox{

BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: 0px;
BORDER-LEFT: #000000 1px solid;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
WIDTH: 650px;
POSITION: relative;
BORDER-BOTTOM: #000000 1px solid;
BACKGROUND-COLOR: #ffffff;
TEXT-ALIGN: center;

}
#verticalLine{
height: 12px;
width: 500px;
border-right:#000000 1px solid;

}
img.banner{
BORDER-TOP: #000000 1px solid;
BORDER-bottom: #000000 1px solid;

}
#contentHolder{
PADDING-TOP: 0;
PADDING-bottom: 0;
PADDING-left: 0;
PADDING-right: 0;
BORDER-RIGHT: #000000 1px solid;
BORDER-Bottom: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
MARGIN-LEFT: auto;
MARGIN-RIGHT: auto;
WIDTH: 650px;
POSITION: relative;
BACKGROUND-COLOR: #ffffff;
text-align: center;


}
#text{
padding: 10 30 0 30;
line-height: 1.75em;
text-align: left;

}
#catalogue{
padding: 20 30 15 25;
width: 650px;
position:relative;
height: 100%;
background:transparent;
margin-right: auto;
margin-left: auto;


}

.outline
{border: 1px solid black;}

div.catalogue_pic {
position: relative;
float: left;
padding-right: 8px;



}
div.catalogue_text{
text-align: left;
position: relative;
LINE-HEIGHT: 1.25em;


}
div.float {
position: relative;
float: left;
margin: 5 5 5 5;

}

div.float p {
text-align: center;
}

#bottomText{
padding: 0px;
margin-top: 10px;
margin-bottom: 0px;
margin-right: 20%;
margin-left: 20%; /* opera does not like 'margin:20px auto' */
background: none;
border: none;
border-top: none;
text-align:center;
voice-family: "\"}\"";
voice-family:inherit;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
}

#blueBox{

text-align: center;
position: relative;
height: 27px;
width: 150px;
background-COLOR: #a1b7d2;
top: -26px;


}

I have both Chinese characters and English characters in one paragraph, but they don't align to the bottom with the English characters appearing like <sup>. I have used 'vertical-align' to align the text, but not successful. Pls help.

I have the following CSS:

Code:

span.title
{
{color:#c38ec7;text-decoration: underline;font-family: forte;font-variant:small-caps;font-weight:bold;font-size:165%}
}

... it works fine but when I try and put 'text-align:center;' that attribute does not seem to work. Is there any way of doing this???

Thanks

I'm creating a dynamic calendar and I can't get the numbers in the cells of my calendar table to align top-right!
Here is my unformatted table...
Code:

	<tr height="75">
		<td><div align="right">12</div></td>
		<td><div style="vertical-align:top; text-align:right">13</div></td>
		<td>14</td>
		<td>15</td>
		<td>16</td>
		<td>17</td>
		<td>18</td>
	</tr>

I want the numbers to be aligned top right, but if I put other data in there(currently there is none, but there will be), I'd like it to be aligned left. I tried using the vertical-align property in a div tag, but that didn't do anything... I can get it to align right with a div tag...

sorry if it's such a stupid quesiton...

Also, a side note... I thought that span allows you to align text as well using the style property, but that doesn't work at all (not even just to the right)

can someone help me with this?
here is the page&css I have been working on...

the page file
the css file

I might be silly to use a template that I did on illustrator (with all the banner, boxes and navbar read and just use that as my container background. then I made some transparent boxes for puting in text, images or form elements. Is that why I am not able to select any other those things on the site?

this is the first time I try using css to make the whole webpage, so I would appreciate any guidance...thanks!!

How do I align the text in my navbar vertically?

I'm trying to do this.

edit.... I can't post the link

by adding vertical-align:middle; to my navbar tag and its not working.

Do you see where i'm going wrong?

Hi,

The text in my navigation bar is slightly off-centre, even though I have applied the text-align:centre property in my style sheet. Is there anything obvious that would be throwing it off?

Any help would be greatly appreciated.

Jimmy

Here is my style sheet:

body
{
padding:0px;
margin:0px;
background-color:#ffffff;
background-image:none
background-repeat:no-repeat;
font-family:verdana, arial, Helvetica, sans-serif;
font-size:11px;
color:#333;
}
/*--------------------DIVs------------------------------*/
div#pagecenter
{
margin: 0 auto;
width: 1024px;
background-color:#ffffff;
}

div#header
{
height:312px;
background-color:#ffffff;
background-repeat:no-repeat;
background: ((address blocked: See forum rules));
padding:5px;
text-align:right;
text-display: none;
color:#FFFFFF;
}

div#desc
{
visibility: hidden;
text-align:left;
}

div#sitename
{
visibility: hidden;
}
div#oup h1 a {
margin-top: -30px;
margin-left: 10px;
margin-right: auto;
width: 100px;
height: 30px;
display: block;
font-size: 0px;
color: #003261
}
div#oup h1 a:hover {color: #003261}
div#clickableheader h1 a {
margin-top: 20px;
width: 1000px;
height: 200px;
display: block;
font-size:0px;
color: #003261;
}
div#clickableheader h1 a:hover {color: #003261}

/* nav */
#nav {
width: 400px;
margin-left: 0px;
margin-right: auto;
margin-top: -70px;
line-height: 20px;
height: 100px;
text-align: center;
font-size: 12px;}
#nav ul {list-style-type: none;}
#nav li {display: block; float:left; width: 50px; padding: 40px 20px 40px 25px; border: none; background: url("images/DBlueUp.jpg") no-repeat;}
#nav li.page-item-6 {padding: 23px 20px 20px 25px; border: none; background: url("images/PU.jpg") no-repeat;}
#nav li.page-item-6.current_page_item {padding: 23px 20px 20px 25px; border: none; background: url("images/PD.jpg") no-repeat;}
#nav li.current_page_item {border: none; background: url("images/DBD.jpg") no-repeat;}
#nav li.page-item-51 {text-align: center; padding: 20px 25px 20px 20px; border: none; background: url("images/GreenUpCentre.png") no-repeat;}
#nav li.page-item-51 a {text-align: center;}
#nav li.page-item-51.current_page_item {padding: 20px 25px 20px 15px; border: none; background: url("images/GD.jpg") no-repeat;}
/* navright */
#navright {
width: 400px;
margin-left: auto ;
margin-right: 0px ;
margin-top: -110px ;
line-height: 20px;
height: 100px;
text-align:center;
font-size: 12px;}
#navright ul {list-style-type: none;}
#navright li {display: block; float:left; width: 50px; padding: 20px 20px 20px 20px; margin: 5px; border: none; background: url("images/LBU.jpg") no-repeat;}
#navright li.page-item-2 {border: none; background: url("images/OU.jpg") no-repeat;}
#navright li.page-item-2.current_page_item {border: none; background: url("images/OD.jpg") no-repeat;}

#navright li.page-item-48.current_page_item {border: none; background: url("images/LBD.jpg") no-repeat;}
#navright li.page-item-13 {padding: 20px 20px 40px 20px; border: none; background: url("images/contact.jpg") no-repeat;}



div.left-navi-blog
{
width:255px;
margin-right:10px;
float:left;
}

div.left-widget
{
width:255px;
margin-top:40px;
background-color:#ffffff;
padding-top:1px;
padding-bottom:200px;
}

div#leftbarfooter
{
background-color:ffff00;
height:15px;
}

div#rightbarfooter
{
background-image:none;
height:15px;
}
div.center-gauche-area
{
width:755px;
margin-right:10px;
float:left;
margin-top:-50px;
}

div.center-blog
{
width:500px;
margin-right:10px;
float:left;
margin-top:-0px;
}

div.post-title
{
visibility: hidden;
margin:0px;
padding:5px;
height:16px;
background-color:#FFFFFF;
}

div.post-content
{
background-color:#FFFFFF;
margin:0px;
padding:5px;
text-align:center;
border-top:#000000 0px solid;
border-bottom:#000000 0px solid;
}

div.post-meta
{
color:#FFFFFF;
margin:0px;
padding:4px;
height:14px;
margin-bottom:10px;
background-color: #ffffff;
}

div.single-meta
{
border:#444 1px dashed;
padding:2px;
margin:5px;
margin-top:10px;
color:#202D32;
background-color:#B0BDC5;
font-size:10px;
}

div.main-meta
{
border:#ccc 1px dashed;
padding:2px;
margin:5px;
margin-top:10px;
color:#666;
background-color:ddd;
font-size:10px;
}

div.commentblog
{
background-color:#B0BDC5;
margin:0px;
padding:5px;
text-align:center;
border-top:#000000 1px solid;
border-bottom:#000000 0px solid;
}
div.singlecommentborder
{
float:left;
}

div.gravatorblog
{
float:left;
width:70px;
}

div.singlecomment
{
float:left;
width:410px;
}

div.right-navi-blog
{
width:200px;
float:left;
}
div.right-widget
{
margin-top:80px;
width:200px;
background-color:#ffffff;
padding-bottom:4px;
padding-right:5px;
}

div.widget-header
{
color:#000000;
font-weight:bold;
padding-left:10px;
padding-top:3px;
}

div.clear
{
clear: left;
margin: 0;
padding: 0;
height: 0;
line-height: 0;
font-size: 0;
}
div#sharebar
{ margin-right:auto;
margin-left:auto;
margin-bottom:0px;
background:#fff;
height:30px;
padding:25px;
color:#003261;
}
div.ouplegal
{
margin-top:0px;
background:#cbeefe;
height:12px;
text-align:center;
padding:5px;
color:#003261;
font-size:10px;
}
div#footer
{
margin-top:0px;
background:#003261;
height:40px;
text-align:center;
padding-top:20px;
color:white;
font-size:16px;
}
div#footer :link {text-decoration:underline}

/*--------------------textgestaltung--------------------*/
p{
margin:0px;
}
h1,h2,h3,h4,h5,h6{
color:#000000;
margin:0px;
padding:0px;
font-size:11px;
}

acronym, abbr, span.caps {
cursor: help;
}
acronym, abbr {

}
blockquote {

}
blockquote cite {

}

hr {

}


dl{
}
dt{
}
dd{
}
ul
{
margin:0px;
margin-left:12px;
list-style:none;
padding-left:8px;
}
ol{
}
li
{
list-style:square;
margin-top:3px;
padding-top:2px;
padding-bottom:2px;
color:#810000;
}
ul ul{
}
blockquote{
}
blockquote p{
}
code{
}
pre{
}
b, strong,i,em {
}
img{

padding:3px;
margin:2px;
}
address {
}

img.ogtzuq{
border:0px;
color:#3B4D56;
}
/*--------------------linkgestaltung--------------------*/

a {text-decoration:none;
color:#FFFFFF;
}
a:link {
text-decoration:none;
color:#FFFFFF;
}
a:visited {
text-decoration:none;
color:#FFFFFF;
}
a:link:focus{
}
a:link:hover, {
font-weight: bold;
}

.post-content a{
color:#333;
}
.post-content a:link
{
color:#333;
}
.post-content a:visited{ color:#333;
}
.post-content a:link:active,
.post-content a:visited:active{color:#333;
}

#single-meta a{
color:#333;
}
#single-meta a:link
{
color:#333;
}
#single-meta a:visited{ color:#333;
}
#single-meta a:link:active,
#single-meta a:visited:active{color:#333;
}
.commentblog a{
color:#333;
}
.commentblog a:link
{
color:#333;
}
.commentblog a:visited{ color:#333;
}
.commentblog a:link:active,
.commentblog a:visited:active{color:#333;
}
/*--------------------bilder als links--------------------*/
a img{

padding:3px;
margin:2px;
}
a:link img {
}
a:visited img {
}
a:link:active img,
a:visited:active img {
}

a:link:hover img,
a:visited:hover img {
padding:3px;
margin:2px;
}
/*--------------------smilies im text--------------------*/
body img.wp-smiley{
}

/*--------------------der weiterlesen link--------------------*/
.more-link{
}
/*--------------------die seiten wenn es mehrere gibt--------------------*/
p.serif{
}
/*--------------------suche--------------------*/
#searchform{
}
input#s{
}
input#searchsubmit{
}


/*--------------------Kommentare--------------------*/
.alt {

}
.commentlist { padding:0px;
margin:0px;

}

.nocomments {
text-align:center;

}

.commentlist li {
padding:0px;
margin:0px;
list-style:none;
color:#111;

}
.commentlist cite,
.commentlist cite a {

}
.commentlist p {
text-align:center;
padding:0px;
padding-top:5px;

}
#commentform p {

}
.commentmetadata {

}
#commentform input {
border:1px solid #333;
margin-bottom:3px;
}
#commentform textarea {
border:1px solid #333;
width:488px;
}
#commentform #submit {

}
/*--------------------fuer den wp kalender--------------------*/

#wp-calendar th {

}

#wp-calendar {
empty-cells: show;

}
#wp-calendar #next a {

}
#wp-calendar #prev a {

}
#wp-calendar a {

}
#wp-calendar caption {

}
#wp-calendar td {

}
#wp-calendar td.pad:hover {
}

/*-------------------- widgets---------------------*/
h2.widgettitle{
}
.widget {
}
/*--------------------Archive--------------------*/
li#archives{
}
.widget_archives{
}
/*--recent posts--*/

li#recent-posts{
}
.widget_recent_entries{
}

/*--------------------text widget--------------------*/
li.widget_text{
}
/*--id haengt von der nummer des text widgets ab*/
li#text-4{
}
div.textwidget{
}
/*--------------------links blogroll--------------------*/
li#links{
}
.widget_links{
}

/*--------------------kategorien--------------------*/
li#categories{
}
.widget_categories{
}
/*-------------------WP Requires------------------*/
.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
.alignright {
float: right;
}
.wp-caption {
border: 1px solid #ddd;
text-align:center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption-dd {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;

}

I have a row of icons (for navigation, with a text description underneath them) I am trying to break out of table design so I want these divs aligned next to each other, with the image/text centered.

Everything looks pretty peachy... but in FF the text such as "Candidates" underneath the icon floats to the left because of the parent float.. it ignores the text-align: center. In other browsers it works but not in FF any help? Also if anyone has a better way of writing this code I would be open to suggestions since I am slowly breaking away from table design.

Thanks!


Code:

.main #header {
	background: #FFFFFF;
	padding: 0 10px 0 10px;  
	border-bottom: 1px solid black;
	border-top: 1px solid black;
}
.icon_nav{
	font-size: 12px;
	float: left;
	text-align: center;
	margin-right: 12px;
	border: 1px solid black;
}

Code:

<div id="header">
    <div style="float: left">
        <img src="images/logo.png"  align="left" style="margin-right: 4px"/>
        <div style="color: #992204; font-size: 18px">XYZ Company</div>
        <div style="color: #992204; font-size: 14px">Professional Company</div>
        <div style="color: #992204; font-size: 12px">481-555-5555</div>
    </div>
    
<div style="float: right;">
    <div class="icon_nav"><img src="images/icons/home.png" /><br />Home</div>
    <div class="icon_nav"><img src="images/icons/employers.png" /><br />Employers</div>
    <div class="icon_nav"><img src="images/icons/candidates.png" /><br />Candidates</div>
    <div class="icon_nav"><img src="images/icons/directions.png" /><br />Directions</div>
    <div class="icon_nav"><img src="images/icons/event_planning.png" /><br />Event Planning</div>
    <div class="icon_nav"><img src="images/icons/contactus.png" /><br />Contact Us</div>
</div>
    
    <br style="clear: both;" />
    <!-- end #header -->
</div>

Please look at this page - http://www.tmhdesign2.com/home-payment-calculator.asp

Why can I not justify the paragraph of text on this page for Firefox???

Hi, I have a list of items a bullet on the left --> check.gif (13 X 12) and I'm totally new with CSS...
but my check aligns ok only with IExplorer, firefox doesn't.

here is my code...

Code:

#myul
{
	color: #000000;
	font-family: Calibri, Geneva, Arial, Helvetica, sans-serif;
	list-style-position: outside;
	margin-left: 15%;
	margin-right: 15%
}

#myul li
{
	color: #0076a3;
	font-family: Calibri, Geneva, Arial, Helvetica, sans-serif;
	background-repeat: no-repeat;
	background-image: url(images/check.gif);
}

Code:

<ul id="myul" class="listObj">
<li class="style16">Test item 1</li>
<li>Checks all devices</li>
<li>Verifies ....quality, ....resolution, precision/accuracy</li>
<li>Compares current imagesbla bla bla bla bla bla bla bla bla some more below.........................ok thanks</li>
</ul>

PLEASE NOTE that I want the check align on top, sometimes the text lenght makes it move, I don't want that to happen.

Can you help
Thanks, my first post here

currently i have the following CSS

Code:

ul#key
{
	list-style-type: none;
	padding: 10px;
}

ul#key li
{
	display: inline;
}

however, some of the list items are small 50x50 images accompanied by text but the text is getting aligned to the bottom of the image rather than half way up. Ive tried using text-align: middle but that doesnt work?

hi. i'm trying to have some text in a div, but also i want the text align to the bottom of the div. something like. but i don't know how... have a look at http://www.desorden.net/prueba.html

any ideas? thanks in advance

Hi all if you look here -> http://www.prxa.info/gol2/community.php to the right where it has status updates i wish the update itself to align to the top of the avatar images to the left of it?

I saw the layout of the table that have 2 columns where everything is aligned to the left in both columns. Since I have to do the CSS without a table where the 1st column is questionings and the 2nd column is form's textboxes & drop-down selection.

So, how do I get them lined up for the make-believe columns??

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Customer/Prospect Feedback And Information Request Form</title>

  <style type="text/css">
   body 
   {
     margin: 10px 0px 10px 25px;
     padding: 0px;
     background-color: #<?=$bg_color;?>;
     color: #<?=$text_font;?>;
     font-family: verdana, sans-serif;
     font-size: 8pt;
     font-style: normal;
     font-weight: bold;
     text-align: left;
   }
   div.divCenterLayout {
     margin: 0px;
     padding: 0px;
   }
   
  </style>
  <script type="text/javascript">
    //Rest of lengthly codes here is removed for forum viewing....
  </script>
 </head>
 <body>
  <div class="divCenterLayout">
    <form name="Feedback" action='abc_info.php?FirstName?LastName?MiddleInitial?Title?Company?StreetAddress?Address2?City?Stat  e?ZipCode?Country?WorkPhone?Fax?email?Product?How?RCPT?Message?WebColor?FontColor?FromWho?WhichWeb' onsubmit="return ValidateForm(document.Feedback);" method="POST">
    <script type="text/javascript">
     //Break up addresses to prevent spam spiders from indexing them...
     var user1 = "feedback";
     var site1 = "<?=$from_who?>";
     document.write('<input type=\"hidden\" name=\"FromWho\" value=\"' + user1 + '@' + site1 + '\">');
    </script>

    <input type="hidden" name="WebColor" value="<?=$bg_color?>">
    <input type="hidden" name="WhichWeb" value="<?=$which_website?>">
    <input type="hidden" name="FontColor" value="<?=$text_font?>">

     Please provide us with the following information: &nbsp;<span style="font-weight:normal;">(note: fields with * are required)</span><br>
     <br>
     First Name:*&nbsp;<input size="25" name="FirstName"><br>
     Last Name:*&nbsp;<input size="25" name="LastName"><br>
     Title:&nbsp;<input size="25" name="Title"><br>
     Company:*&nbsp;<input type="TEXT" size="35" name="Company"><br>
     Street Address:&nbsp;<input type="TEXT" size="35" name="StreetAddress"><br>
     Address (cont.)&nbsp;<input type="TEXT" size="35" name="Address2"><br>
     City:&nbsp;<input type="TEXT" size="25" name="City"><br>
     State/Province:&nbsp;<input type="TEXT" size="25" name="State"><br>
     Zip/Postal Code:&nbsp;<input type="TEXT" size="12" name="ZipCode" maxlength="12"><br>
     Country:&nbsp;<input type="TEXT" size="25" name="Country"><br>
     Work Phone:*&nbsp;<input size="12" name="WorkPhone">&nbsp;&nbsp;(Minimum of 10 digits)<br>
     Fax:&nbsp;<input size="12" name="Fax" maxlength="25">&nbsp;&nbsp;(Minimum of 10 digits)<br>
     E-Mail:*&nbsp;<input size="25" name="email"><br>
     <br>
     Select 1 or More Products You're Interested In:*<br>
     <br>
     &nbsp;
    <!-- Product name is changed to product numbering -->
     <input type="checkbox" name="product 1" value="1"<?=$productChecked2;?>>&nbsp;Product 1 
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <input type="checkbox" name="product 2" value="1"<?=$productChecked3;?>>&nbsp;Product 2
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <input type="checkbox" name="product 3" value="1"<?=$productChecked4;?>>&nbsp;Product 3
     <br>
     &nbsp;
     <input type="checkbox" name="product 4" value="1"<?=$productChecked5;?>>&nbsp;Product 4
     &nbsp;&nbsp;&nbsp;
     &nbsp;&nbsp;&nbsp;
     <input type="checkbox" name="product 5" value="1">&nbsp;Product 5
     <input type="hidden" name="Product">
     <br>
     <br>
     <br>
     How Did You Hear About Us?:*&nbsp;<select size="1" name="How">
      <option selected value="none">Please Select From The Choices ...</option>
      <option value="Direct Mail">Direct Mail</option>
      <option value="Internet">Internet</option>
      <option value="Magazine Ad">Magazine Ad</option>
      <option value="Newspaper Ad">Newspaper Ad</option>
      <option value="Referral">Referral</option>
      <option value="Word of Mouth">Word of Mouth</option>
      <option value="Other">Other</option>        
     </select><br>
     
     Send response to:*&nbsp;<select size="1" name="RCPT">
      <option selected value="none">Please Select From The Choices ...</option>
       <script type="text/javascript">
        //Break up addresses to prevent spam spiders from indexing them...
        var user2 = "marketing";
        var user3 = "software";
        var user4 = "hardware";
        var user5 = "webmaster";
        var site2 = "companyName.com";

        document.write('<option value=\"' + user2 + '@' + site2 + '\">Sales/Marketing</option>');
        document.write('<option value=\"' + user3 + '@' + site2 + '\">Software Support</option>');
        document.write('<option value=\"' + user4 + '@' + site2 + '\">Hardware Support</option>');
        document.write('<option value=\"' + user5 + '@' + site2 + '\">Webmaster</option>');
       </script>
     </select><br>
     <br>
     Your message*:&nbsp;<span style="font-weight:normal;">(please do not use special characters)</span><br>
     <br>
     &nbsp;&nbsp;<input type="submit" value="Send" border="0"><br>
     <br>
     &nbsp;&nbsp;<input type="reset" value="Clear" border="0"><br>
     <textarea rows="3" cols="40" wrap="virtual" name="Message"></textarea><br>
    </font> 
   </form>
  </div>
 </body>
</html>

I would like the align text next to the image and have it flow from the top down. Not adjacent then underneath it.

HTML Source

CSS Source

Once you view the html file, I think you get a better picture of what I'm talking about.