Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help with formatting

Status
Not open for further replies.
jwhite68

jwhite68

IS-IT--Management
Jun 14, 2007
77
BG
I have the following simple table, with 2 columns. Each column has a list in it. The problem is that the list in the first column is vertically centred in the list.

I want both lists to start from the top of the columns.

How do I achieve this?

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
			<table width="100%" border="0">
				<tr>
					<td>
						<div class="multiple_options_caption">Property Features</div><div class="multiple_options"><ul><li>Alarm<br /></li><li>Balcony<br /></li><li>Cable/Satellite TV<br /></li><li>Dishwasher<br /></li><li>Fireplace<br /></li><li>Internet Access<br /></li><li>Microwave<br /></li><li>Patio/Deck<br /></li><li>Washer/Dryer</li></ul></div><br />
					</td>
					<td>
						<div class="multiple_options_caption">Community Features</div><div class="multiple_options"><ul><li>Bike Paths<br /></li><li>Bus station<br /></li><li>Cafe(s)<br /></li><li>Cinema<br /></li><li>College(s)<br /></li><li>Dental clinic<br /></li><li>Hospital<br /></li><li>Medical center<br /></li><li>Playground/Park<br /></li><li>Primary school(s)<br /></li><li>Public Transportation<br /></li><li>Restaurants<br /></li><li>Shopping mall(s)<br /></li><li>University</li></ul></div><br />
					</td>
				</tr>
			</table>

</body>
</html>
 
Sort by date Sort by votes
Since you are using tables, you can simply use the valign attribute of the td tag to align the contents to the top of the cell:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>

<body>
            <table width="100%" border="0">
                <tr>
                    <td valign=Top>
                        <div class="multiple_options_caption">Property Features</div><div class="multiple_options"><ul><li>Alarm</li><li>Balcony</li><li>Cable/Satellite TV</li><li>Dishwasher</li><li>Fireplace</li><li>Internet Access</li><li>Microwave</li><li>Patio/Deck</li><li>Washer/Dryer</li></ul></div>
                    </td>
                    <td valign=Top>
                        <div class="multiple_options_caption">Community Features</div><div class="multiple_options"><ul><li>Bike Paths</li><li>Bus station</li><li>Cafe(s)</li><li>Cinema</li><li>College(s)</li><li>Dental clinic</li><li>Hospital</li><li>Medical center</li><li>Playground/Park</li><li>Primary school(s)</li><li>Public Transportation</li><li>Restaurants</li><li>Shopping mall(s)</li><li>University</li></ul></div>
                    </td>
                </tr>
            </table>
</body>
</html>
I've also removed all of the extraneous (and misused <br /> tags) from the code.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
I forgot to add that valign middle is the default behavior for table cells.

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
It would be more standards compliant if you used [tt]valign="top"[/tt], but it doesn't make much difference in current browsers. If you want to begin moving towards CSS, you could give table cells a class and add [tt]vertical-align: top;[/tt] to the table cell's class in the stylesheet.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Vragabond, that is a better solution. I was just responding with a quick answer. (I even left out the whole tables vs. divs speech.) [smile]

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
399
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
790
spamjim
spamjim
CoolBreeze007
  • Locked
  • Question
Unable to make HTML element adjust with the resizing of the browser
Replies
0
Views
83
CoolBreeze007
CoolBreeze007
LyndonOHRC
  • Locked
  • Question
Need advice with printing on check stock
Replies
5
Views
168
LyndonOHRC
LyndonOHRC
caykamanj1966
  • Locked
  • Question
Sorting a grid list using iframe associated with Google Drive
Replies
0
Views
135
caykamanj1966
caykamanj1966

Part and Inventory Search

Sponsor

Back
Top