-
aligning div tag
Hi,
Am having a align problem / my bad placement of div in the markup, so i arrive my content area is vertically moving down.. to the bottom of an another div tag.
here is the markup am using:
----------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Pohoc: Hospitality & Tourism</title>
<link href="stylesheet/designertheme.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#banner{
width:770px;
}
#navigation{
width:350px;
position:relative;
top:10px;
left:10px;
}
#contentarea{
position:relative;
vertical-align:top;
left:10px;
z-index:3;
}
#category{
position:relative;
width:500px;
left:70px;
}
#explore{
position:relative;
width:150px;
left:570px;
border:dotted;
border-color:#006699;
z-index:1;
}
</style>
</head>
<body>
<table width="770" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#FF9933"><img src="images/top_round.gif" alt=""/></td>
</tr>
<tr><!-- here ya go with everything in the layout-->
<td bgcolor="#FFFFFF">
<div id="pohoclogo"><a href="index.htm"><img src="images/pohoc_logo.jpg" alt="POHOC: Hospitality & Tourism" width="189" height="71" border="0"/></a>
<div id="banner"><img src="images/hotel_page_banner.jpg" alt="Hotel Bookings Unlimited.." />
<div id="navigation"><a href="index.htm" class="topnavlinks">Home</a> | <span class="topnavlinkactive">Hotels</span> | <a href="travel.htm" class="topnavlinks">Travel</a> <a href="food.htm" class="topnavlinks">Food</a> | <a href="bnb.htm" class="topnavlinks">BNB</a><div id="explore"><table width="170" border="0" cellspacing="2" cellpadding="2">
<tr>
<td><img src="images/promoting_india.jpg" alt="Promoting India" /></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</div><div id="contentarea"><p class="runningcopy" align="left">POHOC is the ultimate guide to economy travel - be it for backpackers or any other budget travellers in India.</p>
<p class="runningcopy">In addition, POHOC is an associate of the <a href="http://www.fhrai.com/hotelsrch.asp" class="runningyellowlinks">FHRAI</a> and is therefore uniquely positioned to offer reservation services with almost any listed hotel in the country.</p>
<p><a href="http://www.fhrai.com/hotelsrch.asp" class="runningyellowlinks">Check here to find list of hotels in india >></a></p><div id="category"><table width="84%" border="0" cellspacing="8" cellpadding="8">
<tr>
<td valign="top"><img src="images/budget_hotel_pic.jpg" alt="Budget Hotels" /><h4 class="h4header">Budget Hotels</h4><p class="runningcopy">The instant choice of any economy seeking individuals or groups.</p></td>
<td valign="top"><img src="images/jungle_lodges_pic.jpg" alt="Jungle Lodges" /><h4 class="h4header">Jungle Lodges</h4><p class="runningcopy">Wild havens situated in deep woods or by riversides - nature untouched by civilization.</p></td>
<td valign="top"><img src="images/rustic_mansions_pic.jpg" alt="Rustic Mansions" />
<h4 class="h4header">Rustic Mansions</h4><p class="runningcopy">Ancient homes with all their antiquity and old world charm intact - carefully identified for you by POHOC.</p></td>
</tr>
</table></div>
<p><a href="#" class="runningyellowlinks">Proceed to Reserve your choice >></a><br />
<span class="runningcopy">(Require POHOC account, new users <a href="#" class="runningyellowlinks">Click here to Sign up.</a>)</span></p>
</div></div></div></div>
</td>
</tr><!--end of here ya go with everything in the layout-->
<tr>
<td bgcolor="#FF9933"><img src="images/bottom_round.gif" alt=""/></td>
</tr>
</table>
</body>
</html>
--------------------------------------------------------
Am sure someone who is a developper can spot the mistake instantly ~ looking forward for a reply. Thanks in advance.
hammer.
-
You have three elements, including the contentarea and explore DIVs that are relatively positioned. Relatively positioned elements remain within the flow of document space with other relatively positioned elements.
If you, just for example, change the positioning of the explore DIV to absolute the contentarea will move up as the other element moves out of the flow.
I recommend you redo the layout with floats though to be honest.
-
Thanks & very kind of you for the advice.
hammer.
-
why are you using tables and divs?
