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
  • 170 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by Robtyketto

Dani AI

Generated

Good catch by — the symptom came from mixing floats and absolute positioning. Adding a cleared break forced the footer below the floated left column, which is a valid quick fix. The underlying mechanics: a floated column is removed from normal flow so its container can collapse; an absolutely positioned footer is also taken out of flow and placed relative to the nearest positioned ancestor (or the viewport). That combination makes the footer sit where it visually overlaps the center column unless you explicitly clear or contain the floats. See the MDN notes on float and position for the exact rules: float and position.

Cleaner alternatives that avoid fragile layouts:

  • Let the footer participate in flow (recommended): remove position:absolute and give the footer a clear: both. This keeps it below the floated left column.
#footer {
  clear: both;
  text-align: left;
  padding: 10px 0;
}
  • Contain floats with a clearfix on a wrapper (this is what hinted at). Add a wrapper around your columns and apply a clearfix so the wrapper grows to include floats:
.wrapper::after {
  content: "";
  display: table;
  clear: both;
}
  • For a footer that should stick to the bottom of the viewport when content is short, use modern flexbox (more robust than absolute positioning):
html, body { height: 100%; margin: 0; }
.page { min-height: 100%; display: flex; flex-direction: column; }
.main { flex: 1; }

If you must use position: absolute; bottom: 0;, confine it by giving the containing element position: relative; so the footer is positioned relative to that container rather than the viewport.

Further reading: the clearfix pattern and float behavior are well explained at CSS-Tricks clearfix. These approaches avoid layout surprises when adding images or other tall floats.

Recommended Answers

All 2 Replies

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.