HTML - Tables Not Aligning Properly...

Im trying to get the two items in this table aligned. One is suppose to be on the left side of the screen, the other on the right side but I cant get it to work. What am I doing wrong?

<table>
<tr>
<td align="left">
<p>Im suppose to be on the left side of the screen</p>
</td>
<td align="right">
<p>Im suppose to be on the right side of the screen</p>
</td>
</tr>
</table>

Hey guys, i have 3 tables that I want to align like
1 2 3
at the moment they are
1
2
3
any ideas, here is the code i have

HTML Code:

<form action="process.php" method="POST" class="style1">
<table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3">

<tr>
   <td>Xbox 360 GT:</td>

</tr>
<tr>
   <td><input type="text" name="x360gt" value="x360" /></td>
   <td></td>
</tr>

<tr><td colspan="2" align="right">
<input type="hidden" name="subedit1" value="1">
<input type="submit" value="Edit Gamertag"></td></tr>

</table>
</form>

<br>
<form action="process.php" method="POST" class="style1">

<table  width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3">

<tr>
   <td>PS3 GT:</td>
</tr>
<tr>
   <td><input type="text" name="ps3gt" value="ps3" /></td>
   <td></td>
</tr>

<tr><td colspan="2" align="right">
<input type="hidden" name="subedit2" value="1">
<input type="submit" value="Edit Gamertag"></td></tr>

</table>
</form>
<br>
<form action="process.php" method="POST" class="style1">
<table width="20%" style='border: 1px dotted;' bgcolor="#eeeeee" cellspacing="0" cellpadding="3">

<tr>
   <td>PC GT:</td>
</tr>
<tr>
   <td><input type="text" name="pcgt" value="pc" /></td>
   <td></td>

</tr>
<tr><td colspan="2" align="right">
<input type="hidden" name="subedit3" value="1">
<input type="submit" value="Edit Gamertag"></td></tr>

</table>
</form>

Could anyone help me out please

Im trying to get something to align to the right side of a table, and cant seem to get it right. What this should look like is 'First One' in a cell, and 'Second One' in a cell bellow it, and to the right side they should each have two check marks side by side. Can anyone see what Im doing wrong? Thanks.

<form method="post" action="file.php"><br/><div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"></div>
<div class="AccordionPanelContent"><form action="file.php" method="post">
<table border="3" width="600">
<tr>
<td><strong>First One</strong>
</td>
</tr>
<input type="checkbox" name="a" /><input type="checkbox" name="aa" /></td>
</tr>
</table>
<table border="3" width="600">
<tr>
<td><strong>Second One
</strong>
</td>
</tr>
<input type="checkbox" name="b" /><input type="checkbox" name="ab" /></td>
</tr>
</table>
<p></p>
<input type="submit" value="Submit" name="submit"><br/></form><br/>

http://www.miamiknight.com/table.htm

How do I get the text in all 3 columns to align at the top?
I had to add breaks or rows in column 3 at the bottom to bring the text higher and then column 2 had the text drop lower.

Is there an easy way to always have text align at the tops of each column?

Could somebody help me out in trying to put a separate image beside a table? Every time I try it the image ends up below the table rather than next to it.

The table is surrounding a song lyric box. I want to put an image (of Ellla Fitgerald) beside the table. The image has a border that looks like the table.

The combinded width of table and image is around 520px and I want about a 20px space between the two. That's a total width of 540px. It's to go on my LJ profile page. I fairly sure that's not too wide for the page.

The code for the table and a screenshot of table/lyric box is below.



The image that I'm trying to put next to it is:



The outcome that I'm looking for is:



Thanks in advance.

I know the JS works, but for some reason, this piece of html causes it to sort wrong. I rewrote this coding several times, but still same error. I need these movies added to my database, but I'm not sure what to do. I've stripped it down to make it more convenient:

http://tivaelydoc.110mb.com/horror.html

Hey there,

I have some text in a table that i want to vertically align center, however nothing i try with html or css seems to work. This is my current code atm;

Code:

<table cellpadding="0">
<tr>
<td width="150" height="100" style="vertical-align:middle">
  <img src='portals/default.jpg' >  </td><td style="vertical-align:middle">

    <h3><b><a href="/games/node/2">Welcome to the Halo Portal</a></b></h3><i><div style='font-size:0.9em; line-height: 0.3em;'>Posted by NightFox, on 15/03/09</div></i><br /><div style='line-height: 0.2em'><p>Welcome to the Halo Portal</p>
</div>Halo	<td></tr>
	</table>

I want it all to vertically aligned centrally so that the text will line up with the center of the thumbnail - attached is wat it looks like atm.

If anyone has any ideas please let me know (html, css, or php i don't mind)

Regards

NightFox

Hi,

I have recently downloaded a web template and have been editing it in Dreamweaver CS4. I created a web menu via an application I bought online and intergrated that into the webpage.

It displays out of line in Dreamweaver however appreas to work fine (everything in line) in IE 7.

I do not know where I am going worng with my toolbar / web menu and what I need to change for compatibility. It is written in java but I suspect its some dodgy html code that has be written by me.

The website is www.ritzphoto.net/newsite/

css
Code:

body {
	margin: 0px;
	padding: 0px;
	background: #242323;
	text-align: justify;
	font: 13px Arial, Helvetica, sans-serif;
	color: #444444;
}

h1, h2, h3 {
	margin-top: 0px;
	font-weight: normal;
	color: #FFFFFF;
}

h1 {
	font-size: 2.4em;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.4em;
}

p, ol, ul {
	margin-bottom: 1.8em;
	line-height: 160%;
}

a {
	color: #000000;
}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

a img {
	border: none;
}

#wrapper {
	width: 900px;
	margin: 0 auto;
	border: 10px solid #FFFFFF;
}

/* Header */

#header {
	width: 900px;
	height: 150px;
	margin: 0px auto;

}

#header a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Logo */

#logo {
	float: left;
	padding-left: 20px;
}

#logo h1, #logo p {
	margin: 0px;
	line-height: normal;
	font-weight: normal;
	color: #FFFFFF;
}

#logo h1 {
	padding: 25px 0px 0px 0px;
}

/* Menu */

#menu {
	float: right;
}

#menu ul {
	margin: 0px;
	padding: 49px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
	margin: 0px;
}

#menu a {
	display: block;
	width: auto;
	padding: 6px 20px;
}

#menu a:hover {
	text-decoration: underline;
}

#menu .active {
	background: #404040;
}

#menu .active a {
	background: url(images/img02.gif) no-repeat 100% -40px;
}

/* AWM */

#awmAnchor-menu {
	width: 900px;
	padding: 10px 0px 0px 0px;
	background: #FFFFFF;
	margin: 0px auto;

}
/* Page */

#page {
	width: 900px;
	margin: 0px auto;
	padding: 10px 0px 0px 0px;
	background: #FFFFFF;
}

#header-pic {
	background: url(images/img05.jpg) no-repeat left top;
	width: 900px;
	height: 210px;
}

/* Content */

#content {
	float: right;
	width: 570px;
}

.post {
	margin: 0px 0px 30px 0px;
}

.post .title {
	margin: 0px;
	background: #444444 url(images/img02.jpg) no-repeat left 50%;
	padding: 7px 25px;
	font-size: 1.4em;
}

.post .title h1 {
}

.post .entry {
	padding: 0 20px;
}

.post .meta {
	font-weight: bold;
	padding-left: 20px;
}

.post .byline {
	margin: 0px;
	padding-left: 20px;
}

/* Sidebar */

#sidebar {
	float: left;
	width: 300px;
}

#sidebar-bgtop {
}

#sidebar-bgbtm {
	background: url(images/img03.jpg) no-repeat left bottom;
}

#sidebar-content {
	background: url(images/img01.jpg) repeat-y left top;
}

#sidebar ul {
	padding: 0px 0 5px 0;
	margin: 0px;
	list-style: none;
}

#sidebar li li {
	margin-left: 20px;
	margin-right: 20px;
	line-height: 30px;
	padding-left: 15px;
	border-bottom: 1px dashed #BDBDBD;
	background: url(images/img04.jpg) no-repeat left 50%;
}

#sidebar li ul {
	margin-bottom: 1.8em;
	list-style: none;
}

#sidebar h2 {
	background: #444444 url(images/img02.jpg) no-repeat left 50%;
	padding: 7px 25px;
	font-size: 1.4em;
}

#sidebar a {
	text-decoration: none;
}

#sidebar a:hover {
	text-decoration: underline;
}

/* Search */

#search {
}

#search form {
	margin-bottom: 1.8em;
	padding: 0px;
}

#search fieldset {
	margin-left: 20px;
	padding: 0px;
	border: none;
}

#search #s {
	width: 160px;
}

/* Footer */

#footer {
	clear: both;
	width: 900px;
	height: 50px;
	margin: 0px auto 30px auto;
	color: #FFFFFF;
}

#footer p {
	margin: 0px;
	padding: 19px 0px 0px 0px;
	text-align: center;
	line-height: normal;
	font-size: smaller;
}

#footer a {
	color: #FFFFFF;
}

Cheers,

Dave

Hi all, what is the best method to align sets of labels, drop down lists, text input fields, images, and buttons with html? The file I attached is how I would like it to be formatted. I achieved this using tables, but had to play around with alignments and pixel adjustment for a really long time before they were just right.

For reference, here is how I coded it:
Code:

	<table style="width:768" cellpadding="0" cellspacing="0">
		<td style="width:142" align="right">
			<label for="county">* County :&nbsp;</label>
		</td>
		<td style="width:192" align="left">
			<select name="county" id="county" class="ListBox">
				<option selected>BEAUFORT</option>
				<option>HYDE</option>	
				<option>MARTIN</option>
				<option>TYRELL</option>
				<option>WASHINGTON</option>
			</select>
		</td>
		<td style="width:40"></td>
		<td style="width:100" align="right">
			<label for="caseOpened">* Case Opened :&nbsp;</label>
		</td>
		<td style="width:172" align="left">
			<input type="text" size="10" maxlength="10" name="caseOpened" id="caseOpened"> mm/dd/yyyy&nbsp;
		</td>
		<td style="width:22" align="left">
			&nbsp;&nbsp;<a href="#"><img src="images/calendar.gif" width="16" height="16" vspace="0" border="0" alt="Calender"></a>
		</td>
		<td style="width:100">
			<input type="button" class="button" name="today" value="Today" onClick="setTodaysDate(caseOpened)">
		</td>
	</table><br>
<table style="width:768" cellpadding="0" cellspacing="0">
	<td style="width:142" align="right">
		<label for="localNumber">Local Number :&nbsp;</label>
	</td>
	<td style="width:192" align="left">
		<input type="text" size="20" maxlength="15" name="localNumber" id="localNumber">
	</td>
	<td style="width:40"></td>
	<td style="width:100" align="right">
		<label for="caseNumber">* Case Number :&nbsp;</label>
	</td>
	<td style="width:294" align="left">
		<input type="text" size="11" maxlength="11" name="caseNumber" id="caseNumber">
	</td>
</table><br>

I'm definitely new to html, and had heaps of trouble getting the tables to display properly. Surely there must be an easier method. Also, is there a way to make static html pages resize themselves accordingly in respect to your browser size? Appreciate all the help in advance

Hi

Normally, when you have more than one table in your code, the tables will be placed one under each other.

Example:
<table>
...
</table>
<table>
...
</table>

When you want the tables to be placed next to each other, you need to set the align attribute.

Example:
<table align="left">
...
</table>
<table align="left">
...
</table>

BUT: When you do it like in the 2nd example (tables next to each other), in Firefox, the tables will wrap to a new line if there is no more space. In Internet Explorer, the tables will not wrap. The result is a horizontal scrollbar or "hidden tables".

Why this? How can I make the tables wrap also in Internet Explorer as it does in Firefox? Is it possible with a special CSS definition or with a special DIV/SPAN tag?

Thanks for your help
praiser

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 everyone, I'm new to these boards. Somewhat a newbie at web design, but I know basics. I'm looking to put 2 tables adjacent to each other inside another table. My problem is I can't get the tables to line up the way I want them to. I'll post a picture of how I want it to look, how it looks now and my code.

How I want it to look:


How it looks now:


I want the tables to line up at the top and re-size according to each other so they're always aligned at the top.

Code: coming in next 2 posts

could someone have a look at a site that I am working on...

http://benjaminpotter.org/stpauls/

and tell me how come in IE the picture box moves off to the right...

it has stumped me!

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!

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