Help placing the image on the right place

HTML & CSS
1

Hello,

I’m having two problems on placing an image on the end of my page.
One, it’s not on the bottom of the page.
Two, when the windows size is lower the 970px (more or less) the image doesnt stretch to full width.

Website: http://joaolourenco.net/va/

CSS: http://joaolourenco.net/va/lib/skins/tigers/styles.css

Page:


<div id="menu_prol"></div>
<body>
	<?php echo $page_htmlreq; ?>
	<div id="body">
		<div class="dropdown">
			<a class="account"><span>Crew Login</span></a>
			<div class="submenu" style="display: none; ">
				<ul class="root">
					<li><a href="#Dashboard" >Dashboard</a></li>			
					<li><a href="#Profile" >Profile</a></li>
					<li><a href="#settings">Settings</a></li>
					<li><a href="#feedback">Send Feedback</a></li>
					<li><a href="#signout">Sign Out</a></li>
				</ul>
			</div>
		</div>
		<div id="innerwrapper">
			<div id='cssmenu'>
				<ul>
					<?php
					Template::Show('core_navigation.tpl');
					?>
				</ul>
			</div>
			
			<div id="bodytext">	
				<?php
					if (method_exists(MainController::getModule(), "avoidBox") && MainController::getModule()->avoidBox() == true) echo $page_content;
					else {
						?>
						<div id="mainfullbox">
							<?php echo $page_content; ?>
							<br>
						</div>
						<?
					}
				?>			
			</div>
		</div>
		<div id="footer">
			<a href="#" class="scrollup"></a>
			<p>copyright &copy; 2007 - <?php echo date('Y') ?> - <?php echo SITE_NAME; ?><br />
			<a href="http://www.phpvms.net" target="_blank">powered by phpVMS</a></p>
		</div>
	</div>
</body>
<div id="back_grad_end"></div>
<div class="FadeAway"></div>

How can I solve this two or at least the positioning problem?

Thank you,
Joao Lourenco

2

Hi, joaogl.

The biggest problem seems to be that you have used absolute positioning to layout your page. I suggest that you ditch the absolute and probably most of the relative positioning and let the content dictate the heights of those containers including the <body> which at present has a height of 500px assigned. The use of fixed heights like that is guaranteed to fail.

Although this is just a test page, you have duplicated ID names, which is a no-no. Using class names is far easier to manage than IDs except where IDs are absolutely needed.

ID names that match HTML tag names is likely to be confusing. eg: <body> and <div id=“body”>.

If you have no idea how to layout a page without using absolute positioning, etc., search these forums for “absolute positioning”. You will find more than a few explanations and examples of the pitfalls of positioned layouts and some solutions.

Hope this helps.

PS: posting PHP code is of no value to us. We need to see the HTML and CSS together as we see it in your test page.
You can click the link at the bottom of my post if you need additional guidance about posting code.

3

Thank you I’ll definitely search for help in the forum.

Thanks!