I'm developing a Website for a local charity which must comply to XHTML Transitional standards. Because the site is mostly text based I have decided to use DIV and CSS for page layout.
The main content area has two columns (DIV's) which use Absolute positioning - contained with another DIV which uses Relative positioning to establish a containing block.
The query I have is if all my DIVs are stacked on top of each other, and it is only the DIVs contained within a DIV established as a containing block -Why do I now have to position every DIV that follows the positioned DIV to ensure it comes after it?
I realise that Absolute positioning remove object from the document flow - but these DIV are contained with a normal DIV with a position set as relative - so sure my DIV should stack normal?
I'm a little puzzled to why I need to position my footer DIV, surely the document flow would be normal??
XHTML CODE:
<!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>:: safeline warwick :: for adult survivors of childhood sexual abuse</title>
<style type="text/css">
body { font-family: "Lucida Grande", Arial, sans-serif; font-size:10pt; color:#4D6E8E; }
div { width:650px; }
a:link { background-color:#4D6E8E; font-size:14pt; text-decoration:none; color:#ffffff;}
a:visited { color:#ffffff; text-decoration:none; font-size:14pt; background-color:#4D6E8E; }
a:hover { background-color:#CC0066; color:#ffffff; text-decoration:underline; }
a:active {background-color:#4D6E8E; font-size:14pt; text-decoration:none; color:#ffffff;}
a:link, a:visited, a:hover, a:active { padding: 2px 8px; }
#header { font-size: 8pt; }
#header_link { width:325px; float:left; text-align:left; color:#4D6E8E; padding-bottom:5px;}
#page_date {width:325px; float:right; text-align:right; color:#4D6E8E; padding-bottom:5px;}
#head_link {font-size: 8pt; background-color:#ffffff; color:#4D6E8E; text-decoration:none; padding:0px;}
#content { width:650px; position:relative; padding-top:15px;}
#sidebar { width:160px; position:absolute; top:0; left:0; padding-top:15px; }
#mcontent { width:480px; position:absolute; top:0; right:0; padding-top:15px; padding-left:10px; }
div a.slinks { font-size:12px; background-color:#CCFFFF; color:#4D6E8E; display:block; border-style:solid; border-color:#ffffff; border-width:2px;}
h1 { color: #CC0066; font-size: 32px; margin:0; }
h2 { font-size:18px; background-color:#ffffff; color:#CC0066; margin:0; }
h3 { font-size:14px; background-color:#ffffff; color:#CC0066; margin:0; }
h1, h2, h3 { vertical-align:top; }
strong { color:#CC0066; font-size:12pt; font-weight:bold; }
#sections { width:480px; position:relative; padding-top:10px; }
#forums { width: 235px; position:absolute; top:0; left:0; border-right: 1px dashed #4D6E8E; padding-right:5px; }
#services { width: 230px; position:absolute; top:0; right:0; padding-left:10px; }
hr { border-style:dashed; border-width:1px; border-color:#4D6E8E; }
#mcontent p { font-size: 12pt; }
#footer { background-color: #52BCEC; position:absolute; top:870px; padding-top: 10px; padding-bottom: 10px; }
#footer p { font-size: 8pt; text-align:center; color:#ffffff; }
</style>
</head>
<body>
<div id="header">
<div id="header_link">You're Here:
<a href="index.html" target="_self" id="head_link">Home Page</a>
</div>
<div id="page_date">
<script language="JavaScript" type="text/javascript">
<!--
var m_names = new Array("January", "February", "March",
"April", "May", "June", "July", "August", "September",
"October", "November", "December");
var d = new Date();
var curr_date = d.getDate();
var curr_month = d.getMonth();
var curr_year = d.getFullYear();
document.write(curr_date + "-" + m_names[curr_month]
+ "-" + curr_year);
//-->
</script>
</div>
</div>
<div id="safeline_logo">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="650" height="180">
<param name="movie" value="flash/safeline-logo.swf" />
<param name="quality" value="high" />
<embed src="flash/safeline-logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="650" height="180"></embed>
</object>
</div>
<div id="page_links">
<a href="index.html" target="_self" title="home page">home</a>
<a href="index.html" target="_self" title="information on how we got started">about us</a>
<a href="index.html" target="_self" title="information for survivors of sexual abuse">survivors</a>
<a href="index.html" target="_self" title="information for friends and family">friends & family</a>
<a href="index.html" target="_self" title="join our forum and post a topic">forum</a>
<a href="index.html" target="_self" title="information of how to volunteer and support us">volunteer</a>
<a href="index.html" target="_self" title="how to contact and find us">contact</a>
</div>
<div id="content">
<div id="sidebar">
<h3><img src="images/square.jpg" /> PAGE TOPIC LINKS</h3>
<a href="index.html" target="_self" class="slinks">>> about us</a>
<a href="index.html" target="_self" class="slinks">>> our services</a>
<a href="index.html" target="_self" class="slinks">>> our support groups</a>
<a href="index.html" target="_self" class="slinks">>> volunteer for us</a>
<a href="index.html" target="_self" class="slinks">>> how to find us</a>
<p><img src="images/phone-bar.jpg" /></p>
<h3><img src="images/square.jpg" /> MEMBERSHIP</h3>
<p>To become a member and supporter of our services<br />
[click here]</p>
<h3><img src="images/square.jpg" /> ANNUAL REPORT</h3>
<p>
<img src="images/pdf-img.jpg" id="pdf-img" />
<br />To download a copy of <br />
our annual report in PDF <br />format [click here] </p>
</div>
<div id="mcontent">
<h1>WELCOME TO OUR WEBSITE</h1>
<p>SAFELINE is a voluntary association based in the UK which has been established by people
who were themselves sexually abused as children. </p>
<p><strong>SAFELINE CAN HELP YOU to FEEL SAFE</strong></p>
<p>Childhood Sexual Abuse is not something new it has gone on for generation upon
generation and has been pushed "under the carpet" for years. </p>
<p>Many survivors have suffered since they were children,
wondering who can they tell? and will they be believed?
</p>
<p>You may have tried to tell people when you were younger
and no one listened. You may sometimes feel dirty and
guilty and also want to harm yourself. </p>
<p>You can sometimes feel very small and that the world is
a big hostile place with nowhere for you to be safe. </p>
<p>You may lack confidence and have low self esteem. </p>
<div id="sections">
<div id="forums">
<h2><img src="images/square.jpg" /> FORUMS</h2>
<p>Share your views and gain support from other survivors of sexual abuse
by contributing to one of our many discussion forums [more]</p>
</div>
<div id="services">
<h2><img src="images/square.jpg" /> OUR SERVICES</h2>
<p>We offer a number of support groups and services in your local area, discover
how Safeline and other groups can help you [more]</p>
</div>
</div>
</div>
</div>
<div id="footer"><p>Registered Charity No. 1070854 | Terms of Use | Website © 2005 Safeline</p></div>
</body>
</html>
Gaz
Pure CSS Positioning Prob
