Member Avatar for Robtyketto

Greetings,

I have a css file (See below) which has setting for THREE divisions "centercol", "leftcol" and "footer".

The stylesheet works fine until I add an image to the division (leftcol).

The settings get applied to the the footer division as printed at text is printed at the bottom of the page, however it appears the text appears in the centre of the page as if using the centercol settings.

I have tried adding a float setting to the division footer settings too without any luck.
Included code for the xhtml with the problem.

Can anyone help in getting the footer printer at the bottom left of the page?
The stylesheet works on another page but that doesnt use the division leftcol.

Hope this is enough information, thanks.

Note: Not sure why the text doesnt appear tabbed correctly, looks ok in my editor???

body 
{
background-image:url('primirahols.jpg');
background-repeat:no-repeat;
}

th 
{
	font-family: Times New Roman;
	font-size: 18px;
}

#centercol {
			margin: 0 210px 0 210px;
		}

#leftcol {
			float: left;
			width: 200px;
}

#footer {
		float: left;
		position: absolute;
    bottom: 0;
		text-align: center;
		}
		
a:link
{
	color: #000000;
	font-weight: bold;
	text-decoration: none;
}

a:visited {
	color: #000000;
	text-decoration: none;
}
a:hover {
	font-weight: bold;
	color: #0033ff;
	text-decoration: none;
}

a:active {
	text-decoration: none;
	}
<!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>
  			<title>America</title>
  
        <meta name="author" content="Rob" />
      	<meta name="description" content="Primira Holiday website" />
      	<meta name="keywords" content="Primial Holidays Europe America Africa" />
      	
      	<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	
	<body>
  			
				<div align="left">
						 	 <img alt="primira logo" src="primiralogo.gif" id="logo" />
						 	
							 <table width="100%" border="0" cellspacing="0" summary="">
  							 		<tr>
  										<th align="center"> <a href="index.htm" id="America">Return to Homepage</a></th>
										</tr>
  							</table>
					<hr />
				</div>
			
			<div id="leftcol">
					 <img alt="New York" src="newyork.jpg" id="newyork" width="200" height="400"/>
			</div>
			
			<div id="centercol">
						<h2>America</h2>			
						
						 <table width="100%" border="1" cellspacing="0" summary="">
						 <tr>
						 		 <th align="left">Column1</th>
						 		 <th align="left">Column2</th>
								 <th align="left">Column3</th>
						 </tr>
						 
						 <tr>
						 		 <td>Data 1</td>
								 <td>Data 2</td>
								 <td>Data 3</td>
						 </tr>
						 
						 </table>		
			</div>
				
			<div id="footer">
				<p>Author: <b>Rob</b> Last updated on <b>07 November 2008 18:49:04</b></p>
			</div>
				
  </body>
				
</html>
  • 2 Contributors
  • 2 Replies
  • 117 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Robtyketto
Member Avatar for wickedsunny

ok buddy i have gone through ur design the first and main thing which u shud know is that u shud start working inside a main continer or div. we don't start directly on a page. that is th only problem . put ur contest inside a main div they will be fine ok.

Member Avatar for Robtyketto

Sorted out tabbing and reset style settings within a break :)

#footerbr { 
	clear: both; 
}

Happy!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.