CSS 2 column + header and footer Layout

[RamsayX]

Hey everyone ... I need a hand here please

I'm using the column wrapping trick taught in the css sitepoint book by Dan schafer. I'm having a few problems, all heeding different results in different browsers ... the notable one being the footer. This is supposed to be pushed down by the content as you'd expect, its not doing that if you look through the pages.

The other problems are:
2) Section headers (like "Dentists concerned with impact of pop on kids’ teeth" and "Test Your Dental IQ" are not showing right, they are supposed to be vertically centered over the images they are on top of now.
3) There are white spaces in the login box on the left ... shouldn't be, should be all that light orange colour in the BG.
4) Also the search box at top right, the text input is off ... iit and the 2 images on other side are supposed to be vertically centered together ...

What am I doing wrong here? The link is:
http://adsbc.bc.ca/dev/

The stylesheets are here:

http://adsbc.bc.ca/dev/css/contentElements.css
http://adsbc.bc.ca/dev/css/layoutElements.css

Thanks so much!

[RamsayX]

Ok I've fixed problem no.4 myself ... I was missing some attributes apparently that I thought were there. 1 down, 3 to go ...

[Paul O'B]

Hi,

The section headers alignment is prbably due to the default padding and margins on the p tag.

Try

.main_headline p {margin-top:0;padding-top:2px;}

Your footer is being overlapped by the text because you have just absolutely placed it on the page. Absolute elements are removed from the flow and will not be affected by any other content.

You need to put your footer back into the flow so it sits beneath the content. Of course this may mean changing other elements to suit also. You could place the footer absolutely in relation to the parent but you would need to add position:relative to the parent. You would then need to make provisions that the text doesn't overlap the footer by supplying padding-bottom to the element above so that the text is held clear. All in all it may be better just to put the footer back into the flow of the document.

Paul

Try to maintain a logical flow through the page and only absolutely place elements when necessary.

Paul

[RamsayX]

Ok thanks for replying Paul ...

I got the section headers going nicely now. I am still unsure of the footer though ... I think I have the div's in the right order on the jsp page, and I tried a few changes in and around the stylesheets, but nothing was getting me the result I wanted. I tried changing the footer to relative but that put it near the top of the page ... I'm really confused here

Edit - I'm not able to figure out the white spaces in the local navigation either on the left side

[RamsayX]

Ok ... problems 2) 3) and 4) are all fixed now ... I'm still trying to grasp the first problem though. Anyone??

[Paul O'B]

What is problem 1 again Is it the footer?

[RamsayX]

Thats right, about the footer,I've just uploaded the latest files. Thank you for your help Paul so far, I am starting to grasp the layouts concept with CSS (I've been using tables for years until I bought Dan Schafer's book) ... but I'm not 100% there yet. Lets see if we can get this page fixed first

[Paul O'B]

Hi,

The problem with your footer is as I explained earlier and will take a little bit of redesigning on your part I'm afraid

The content on your page is all absolutely placed and therefore takes up no space because it is removed from the flow of the document. This is fine when you are able to put everything exactly where you want it, however the problem arises when you have different size pages and you want your footer to remain below the content on other pages.

The only option in your design is for you to place the footer exactly where it needs to be on all the relevant pages.

What you should really do is to try and bring some flow back into the page as mentioned before. Elements that are statically placed (have no position set) will follow each other in a logical order and will exert pressure on those elements below.

Therefore, (if it were my page), I would use this method:

Create a static header element to contain all your header content and give it a height large enough to contain all the heading content. This will preserve the flow of the page and ensure that following content can follow on without positioning.

Create a left column that is floated to the side and is wide enough to hold all your left column content. All the left content elements can then be stacked in this float and should be placed one after the other without using absolute positioning (except where needed) but using margins etc to align elements.

Next create a content div that has a margin-left to clear the floated content and in this div put your existing centre content. However you will need to change the way that you have positioned things in this centre section. (This is where it gets complicated). The content div should have a position:relative defined (without co-ordinates) to gain a stacking context so that you can position within this element if necessary and not from the body as before.

The elements in the centre should be either floated or static so that they remain in the flow. The floted element comes first and then the static content follows and wraps around. You can of course change this to one absolutely placed element and make sure the other element to the side is kept clear with margins when both elements are the same height.

The boxes you have with images and arrows and text all absolutely placed should be contained in a wrapper that is not absolutely placed but has height and width equal to the content that goes inside. This will allow you to place the elements inside this wrapper absolutely so that you can position them where you want but the outer remains in the flow of the document. The wrapper of this (subpanel) boxes should have position relative defined so that you place the content relative to the immediate parent as mentioned previously.

The subpanel wrapper can now be floated alongside each other and still preserve the flow of the document. Remember that floated content will need to be cleared when you wwant content to follow on a new line.

This sequence of static or floated positioning should be carried through the page until the end of your content div preserving the flow of the epage all the way through.#

The footer can then be placed after the content and will need no positioning at all (except for margins etc) and will be pushed down by the content. The footer will also need to have a clear:both so that it clears the left column also. In this way your footer does not rely on any positioning and will be pushed down by any content on any page.

As you can see this is no simple change and will require a complete re-think of the way the design is handled. I have not offered any code or any quick fixes because I think you need to work through this at your own pace and also it would take me some time to work out all the sizes and where everything gets positioned and how big the wrappers should be etc.....

You may in this instance think it better just to place the footer absolutely where you want it on the relevant pages

Hope that all makes sense

Paul

[RamsayX]

Wow, yikes ok thank you Paul ... for all that. I was afraid I was going to have to do that. I'll tackle this on the weekend then, and write back with the results here. Thanks again

[RamsayX]

Ok could we take a look again? I'm getting the hang of it .. sorta. Most elements are relative now but its still not looking right ... the rightcolumn doesnt want to hang in the right place. I've just changed the right side to float left instead of right, but is that standard practice for a 2column layout? I'm guessing not ... anyway I'm getting the gyst of it but some things are still nagging me. Thanks in advance.

I'm actually working on this section now, has their own stylesheets:
http://adsbc.bc.ca/dev/members/members.jsp
http://adsbc.bc.ca/dev/css/members_contentElements.css
http://adsbc.bc.ca/dev/css/members_layoutElements.css

[Paul O'B]

Hi,

You have some end tags missing or in the wrong place that need to be fixed. Also you don't need to use postion:relative to move things around you should be using margins instead. Position:relative is only used in special cases and is not generally used throughout a layout as it leaves gaps everywhere. (See FAQ on positioning).

I've managed to get your page to display but theres an awful lot of code to straighten out and it would probably be quicker for me to start again than fix your errors.

Heres the code so far, which you need to work on still.

<!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>British Columbia Dental Association</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../css/members_contentElements.css" rel="stylesheet" type="text/css" />
<link href="../css/members_layoutElements.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* Link Styles */
/* Normal Links */
A:link, A:visited, A:active { 
 color:#000000;
 text-decoration:none;
}
A:hover {
 color:#000000;
 text-decoration:underline;
}
/* "Back to Top" Links on content pages */
A.topLink:link, A.topLink:visited, A.topLink:active {
 position:relative;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:10px;
 font-weight:normal;
 color:#552B64;
 float:right;
 text-decoration:none;
}
A.topLink:hover {
 position:relative;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:10px;
 font-weight:normal;
 color:#552B64;
 float:right;
 text-decoration:underline;
}
/* Main Content */
.main_headline {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:13px;
 font-weight:bold;
 color:#FFFFFF;
 text-indent:15px;
 margin-top:15px;
}
.main_content {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 font-weight:normal;
 color:#1C2777;
 line-height:16px;
 text-indent:0px;
}
.main_content-important {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 font-weight:bold;
 color:#1C2777;
 line-height:16px;
 text-indent:0px;
}
.main_content-images {
 float:left;
 margin-right:15px;
 margin-bottom:5px;
}
.main_content-title {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:14px;
 font-weight:bold;
 color:#1C2777;
 line-height:16px;
 text-indent:0px;
}
.main_content-clear {
 clear:left;
}
.main_content_list {
 list-style-type: decimal;
}
.main_content, ol {
 list-style-type: decimal;
}
.main_content, ol ol{
 list-style-type: lower-alpha;
}
/* Extra Content */
.extra_content {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 font-weight:normal;
 color:#1C2777;
 line-height:16px;
}
.extra_content-important {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 font-weight:bold;
 color:#1C2777;
 line-height:16px;
}
.extra_commentsContent {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:12px;
 font-weight:normal;
 color:#1C2777;
 line-height:16px;
}
/* Search Engine */
.searchEngine {
 background-color:#000000;
}
.searchEngine_searchImage {
 vertical-align:top;
}
.searchEngine_inputField {
 color:#666666;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:9px;
 font-weight:normal;
 text-align:left;
 vertical-align:top;
 padding-top:3px;
}
.searchEngine_submitButton {
 vertical-align:top;
}
/* Sponsors */
.sponsors {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:9px;
 font-weight:normal;
 line-height:12px;
 text-align:center;
}
/* Footer */
.footer {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:10px;
 font-weight:normal;
 color:#000000;
 text-align:center;
}
.footer-important {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:10px;
 font-weight:bold;
 color:#000000;
 text-align:center;
}
/* : -- Attribute Selectors -- : */
html, body {
 margin:0; 
 padding:0;
 border:0;
 
 /* Customized Scrollbar appearance, only present in IE */
/* scrollbar-arrow-color:#FFFFFF;
 scrollbar-base-color:#000033;
 scrollbar-shadow-color:#F3F3F3;
 scrollbar-face-color:#552B64;
 scrollbar-highlight-color:#F3F3F3;
 scrollbar-dark-shadow-color:#333333;
 scrollbar-3d-light-color:#000033;*/
}
/* : -- Main Content Layouts -- : */
/* Main Content */
#allContent {
 position:relative;
 overflow:visible;
 margin-top:0px;
}
#content_sectionHeader {
 position:relative;
 background-color:#000000;
 height:23px;
 width:85%;
 padding-top:4px;
 max-width:658px;
 overflow:hidden;
}
#content_sectionText {
 position:relative;
 background-color:#FFFFFF;
 width:85%;
 margin-top:20px;
 padding-left:15px;
 overflow:visible;
}
#content_inlineImageContent {
 position:relative;
 width:70%;
 margin-left:225px;
 overflow:visible;
}
#extraColumn {
 position:relative;
 width:25%;
 right:25px;
 overflow:visible;
}
#extra_comments {
 position:relative;
 background-color:#ffc;
 margin-top:30px;
 width:85%;
 height:23px;
 padding-top:2px;
 padding-left:15px;
 overflow:hidden;
 clear:both;
}
#newSection_header {
 position:relative;
 margin-top:20px;
 width:85%;
 height:23px;
 overflow:visible;
}
#newSection_content {
 position:relative;
 margin-top:15px;
 width:85%;
 overflow:visible;
}
/* : -- Layout Elements -- : */
/* Column Wrappers */
#leftSide {
 position:relative;
 float:left;
 width:172px;
 overflow:visible;
}
#rightSide {
 position:relative;
 overflow:visible;
 margin-left:180px;
}
#columnClear {
 clear:both;
}
/* Header */
#header {
 position:relative;
 background:url(http://adsbc.bc.ca/dev/media/rightSi...er_members.gif) repeat-x;
}
/* Global Navigation */
#globalNav {
 width:100%;
 background-color:#E5E5E5;
 height:24px;
}
#globalNav_extra {
 position:absolute;
 top:133px;
 left:0px;
 width:100%;
 height:24px;
 background-color:#E5E5E5;
 z-index:-1;
}
/* Search Engine */
#searchEngine {
 position:absolute;
 right:14px;
 top:132px;
 height:22px;
 width:315px;
 overflow:hidden;
}
/* Local Navigation */
#membersLocalNav_leftSide {
 position:absolute;
 left:0px;
 top:0px;
 width:15px;
 height:119px;
}
#membersLocalNav_association {
 position:absolute;
 left:15px;
 top:0px;
 width:143px;
 height:27px;
}
#membersLocalNav_members {
 position:absolute;
 left:15px;
 top:27px;
 width:143px;
 height:22px;
}
#membersLocalNav_calendar {
 position:absolute;
 left:15px;
 top:71px;
 width:143px;
 height:22px;
}
#membersLocalNav_classifieds {
 position:absolute;
 left:15px;
 top:226px;
 width:143px;
 height:21px;
}
#membersLocalNav_links {
 position:absolute;
 left:15px;
 top:92px;
 width:143px;
 height:27px;
}
/* Members Panel */
#membersPanel_leftSide {
 position:absolute;
 left:0px;
 top:127px;
 width:12px;
 height:125px;
}
#membersPanel_top {
 position:absolute;
 left:12px;
 top:127px;
 width:139px;
 height:11px;
}
#membersPanel_rightSide {
 position:absolute;
 left:151px;
 top:127px;
 width:7px;
 height:125px;
}
#membersPanel_profile {
 position:absolute;
 left:12px;
 top:138px;
 width:139px;
 height:37px;
}
#membersPanel_rosterForm {
 position:absolute;
 left:12px;
 top:175px;
 width:139px;
 height:39px;
}
#membersPanel_privacyPolicy {
 position:absolute;
 left:12px;
 top:214px;
 width:139px;
 height:38px;
}
/* Sponsors */
#sponsorLinks {
 position:absolute;
 left:0px;
 top:275px;
 width:158px;
 height:432px;
}
/* Footer */
#upperFooter {
 position:relative;
 background:url(http://adsbc.bc.ca/dev/media/upperFooter.gif) repeat-x;
 margin-top:50px;
 height:16px;
 overflow:visible;
}
#footer {
 position:relative;
 padding-top:8px;
}
form {margin:0;padding:0}
</style>
<script type="text/javascript" src='../js/members_localNav.js'></script>
<script type="text/javascript" src='../js/members_preloadImages.js'></script>
</head>
<body onload="members_preloadImages();">
<script type="text/javascript" language="JavaScript1.2">members_fwLoadMenus();</script>
<div id="header"> <a href="<A href="http://www.adsbc.bc.ca"><img">http://www.adsbc.bc.ca"><img src="http://adsbc.bc.ca/dev/media/header_members.jpg" width="835" height="131" border="0" alt="British Columbia Dental Association" /></a></div>
<div id="globalNav"> <a href="../members/members.jsp"><img src="http://adsbc.bc.ca/dev/media/globalNav_home.gif" width="74" height="22" border="0" alt="BCDA Home" /></a><a href="../members/contact.jsp"><img src="http://adsbc.bc.ca/dev/media/globalNav_contact.gif" width="75" height="22" border="0" alt="BCDA Contact" /></a><a href="../public/public.jsp"><img src="http://adsbc.bc.ca/dev/media/globalNav_public.gif" width="83" height="22" border="0" alt="BCDA Public" /></a></div>
<div id="globalNav_extra">&nbsp;</div>
<div id="searchEngine" class="searchEngine"> 
  <form action="../servlet/Search" method="post">
	<input name="indexName" type="hidden" value="index">
	<img class="searchEngine_searchImage" src="http://adsbc.bc.ca/dev/media/searchEngine_text.gif" alt="Search"> 
	<input class="searchEngine_inputField" name="query" type="text" size="41">
	<input class="searchEngine_submitButton" name="submit" type="image" src="http://adsbc.bc.ca/dev/media/searchEngine_submit.gif" value="Search">
  </form>
</div>
<div id="contentWrapper"> 
  <div id="leftSide"> 
	<div id="membersLocalNav_leftSide"><img src="http://adsbc.bc.ca/dev/media/members...v_leftSide.gif" width="15" height="119" alt="" /></div>
	<div id="membersLocalNav_association"> <a href="#"
  onmouseover="changeImages('membersLocalNav_association', '../media/membersLocalNav_assoc-over.gif'); window.FW_showMenu(window.fw_menu_0,159,161); return true;"
  onmouseout="changeImages('membersLocalNav_association', '../media/membersLocalNav_assoc.gif'); return true;"> 
	  <img name="membersLocalNav_association" src="http://adsbc.bc.ca/dev/media/membersLocalNav_assoc.gif" width="143" height="27" border="0" alt="Association News" /></a> 
	</div>
	<div id="membersLocalNav_members"> <a href="#"
  onmouseover="changeImages('membersLocalNav_members', '../media/membersLocalNav_members-over.gif'); window.FW_showMenu(window.fw_menu_1,159,188); return true;"
  onmouseout="changeImages('membersLocalNav_members', '../media/membersLocalNav_members.gif'); return true;"> 
	  <img name="membersLocalNav_members" src="http://adsbc.bc.ca/dev/media/members...av_members.gif" width="143" height="22" border="0" alt="Member Resources" /></a> 
	</div>
	<div id="membersLocalNav_calendar"> <a href="#"
  onmouseover="changeImages('membersLocalNav_calendar', '../media/membersLocalNav_cal-over.gif'); window.FW_showMenu(window.fw_menu_2,159,210); return true;"
  onmouseout="changeImages('membersLocalNav_calendar', '../media/membersLocalNav_cal.gif'); return true;"> 
	  <img name="membersLocalNav_calendar" src="http://adsbc.bc.ca/dev/media/membersLocalNav_cal.gif" width="143" height="22" border="0" alt="Calendar" /></a> 
	</div>
	<div id="membersLocalNav_classifieds"> <a href="#"
  onmouseover="changeImages('membersLocalNav_classifieds', '../media/membersLocalNav_class-over.gif'); return true;"
  onmouseout="changeImages('membersLocalNav_classifieds', '../media/membersLocalNav_class.gif'); return true;"> 
	  <img name="membersLocalNav_classifieds" src="http://adsbc.bc.ca/dev/media/membersLocalNav_class.gif" width="143" height="21" border="0" alt="Classifieds" /></a> 
	</div>
	<div id="membersLocalNav_links"> <a href="#"
  onmouseover="changeImages('membersLocalNav_links', '../media/membersLocalNav_links-over.gif'); return true;"
  onmouseout="changeImages('membersLocalNav_links', '../media/membersLocalNav_links.gif'); return true;"> 
	  <img name="membersLocalNav_links" src="http://adsbc.bc.ca/dev/media/membersLocalNav_links.gif" width="143" height="27" border="0" alt="Links" /></a> 
	</div>
	<div id="membersPanel_leftSide"> <img src="http://adsbc.bc.ca/dev/media/membersPanel_leftSide.gif" width="12" height="125" alt="" /> 
	</div>
	<div id="membersPanel_top"> <img src="http://adsbc.bc.ca/dev/media/membersPanel_top.gif" width="139" height="11" alt="" /> 
	</div>
	<div id="membersPanel_rightSide"> <img src="http://adsbc.bc.ca/dev/media/membersPanel_rightSide.gif" width="7" height="125" alt="" /> 
	</div>
	<div id="membersPanel_profile"> <a href="members.jsp"><img src="http://adsbc.bc.ca/dev/media/membersPanel_profile.gif" alt="Member&#39;s Profile" width="139" height="37" border="0" id="memberPanel_profile" /></a> 
	</div>
	<div id="membersPanel_rosterForm"> <a href="../pdf/ReferralRoster.pdf" target="_blank"><img src="http://adsbc.bc.ca/dev/media/members...rosterForm.gif" alt="Patient Referral Roster Form" width="139" height="39" border="0" id="memberPanel_rosterForm" /></a> 
	</div>
	<div id="membersPanel_privacyPolicy"> <a href="../members/policy.jsp" target="_blank"><img src="http://adsbc.bc.ca/dev/media/members...vacyPolicy.gif" alt="Privacy Policy" width="139" height="38" border="0" id="memberPanel_privacyPolicy" /></a> 
	</div>
	<div id="sponsorLinks" class="sponsors"> <a href="http://www.pacificdentalonline.com" target="_blank"><img src="http://adsbc.bc.ca/dev/media/sponsors_pdc.jpg" border="0" alt="Pacific Dental Conference Vancouver, March 10-12, 2005"><br />
	  <br />
	  March 10-12, 2005</a><br />
	  <br />
	  <a href="../pdf/Bell_dental_SEPT_04.pdf" target="_blank"><img src="http://adsbc.bc.ca/dev/media/sponsors_bell.gif" width="140" height="65" border="0" alt="Click here to view latest offer"> 
	  Click here to see Bell Mobility's latest offer</a><br />
	</div>
  </div>
  <div id="rightSide"> 
	<div id="allContent"> 
	  <div id="content_sectionHeader" class="main_headline"> Members Home Page 
	  </div>
	  <div id="content_sectionText" class="main_content"> 
		<div id="newSection_headline" class="secondary_headline"> Welcome 
		  <div id="newSection_content" class="main_content"> Welcome to the member 
			home page of the British Columbia Dental Association. The site contains 
			valuable practice management information, associaton information including 
			our <i>Connections</i> newsletter, information on special offers for 
			BC Dental Association members from our preferred suppliers, and continually 
			updated classifieds and calendar sections. <br>
			<br>
			If you're accepting new patients, please complete our <a  href="../pdf/ReferralRoster.pdf" target="_blank">Patient 
			Referral Roster form</a> so that your name can be added to our telephone 
			referral database and "Find a Dentist" feature on the public home 
			page. <br>
			<br>
			If you would like to update your contact information, please complete 
			our <a href="../pdf/ChangeOfInformation.pdf" target="_blank">Change 
			of Information</a> form and send it back to the Association by fax 
			or mail. <br>
			<div id="newSection_headline" class="secondary_headline"> October 
			  2004 <i>Connections</i> 
			  <div id="newSection_content" class="main_content"> The latest issue 
				of our newsletter contains the following: <br>
				<br>
				* name change for the Association <br>
				* hygiene college seeks exemption from the 365-day rule <br>
				* B3Dental forges relationship with the Association <br>
				<br>
				To view the PDF of the issue, please <a target="_blank" href="../pdf/309752.pdf">click 
				here.</a> All other issues of <i>Connections</i> can be found 
				under Association News/Newsletters. 
				<div id="newSection_headline" class="secondary_headline"> Removal 
				  of the "365-Day" Rule a Danger to the Public 
				  <div id="newSection_content" class="main_content"> In our October 
					newsletter the President's Message focuses on the College 
					of Dental Hygienists of BC's recent submission to government 
					for changes to the 365-Day Rule. To view the Association's 
					response, please <a href="../pdf/HygieneSubmissionFinal.pdf">click 
					here</a>. </div>
				</div>
			  </div>
			</div>
			<script language="JavaScript1.2">
function getmURL(){
  var murl = "postFeedback.jsp?mpage=" + document.title;
  window.open(murl);
//  return true;
}
</script>
			<div id="extra_comments" class="extra_commentsContent"> Please provide 
			  any comments on this page - Click <a href="#" onClick="javascript:getmURL()">here</a> 
			  for feedback form. </div>
	</div>
		</div>
	  </div>
	  <div id="columnClear"></div>
	</div>
  </div>
</div>
<div id="upperFooter"> <img src="http://adsbc.bc.ca/dev/media/upperFooter.gif" width="847" height="16" alt="" /> 
  <div id="footer"> 
	<p class="footer"><span class="footer-important">British Columbia Dental Association</span> 
	  Suite 400 - 1765 West 8th Avenue, Vancouver, BC V6J 5C6</p>
	<p class="footer">Tel: (604) 736-7202; (888) 396-9888, Fax: (604) 736-7588, 
	  e-mail: <a href="<A href="mailto:post&#64;adsbc.com">post&#64;adsbc.com</a></p">mailto:post&#64;adsbc.com">post&#64;adsbc.com</a></p>
  </div>
</div>
</body>
</html>

Now that you have floated the left column you can just have the right column moved to the right with a margin-left to clear the float (as I have done above). There is also no need to place all of the left column absolutely as it should be able to follow logically. Of course some of the images alignments will be absolutely placed but they could be relative to their parent and not the body.

I'm sorry I could not give you the full solution but it would take some time and I'm working on something myself right at this minute but I could look again tomorrow afternoon if you are still stuck.

Paul


You have about 44 errors in there that also need tidying up.

[RamsayX]

Thanks Paul, that 44 XHTML errors you mean? If so ya I haven't bothered checking those yet, I always leave validation for last. Plus some of the content is entered from a db which the client controls, of course they don't know XHTML

The biggest problem I am left with here is trying to figure out the footer problem ... it just won't clear the two columns. I can't figure out why!

[Paul O'B]

The biggest problem I am left with here is trying to figure out the footer problem ... it just won't clear the two columns. I can't figure out why

It was cleared ok in my code above

Paul

[RamsayX]

Due to undesirable circumstances I've had to switch to a "hybrid" design consisting of both CSS and tables ...

Anyway, new problem:
http://adsbc.bc.ca/dev/members/members.jsp
http://adsbc.bc.ca/dev/public/public.jsp

The footer is an include on both files ... yet I'm getting differing results ... I believe the structure is the same though I'm not sure. The footer on the members page is fine for now (even though its supposed to clear both sides) but the public page the footer is near the top of the page for some reason. What to do? Thanks!

[Paul O'B]

Hi,

I get internal server error on both those links I'm afraid

Paul

[RamsayX]

Thanks ... back up now. It was a temporary problem.

[Paul O'B]

Hi,

The reason the foooter is above your right side content is as explained before. Your rightside content is all absolutely placed therefore it doesn't exist in the flow of the document.

You need to bring some flow back into the layout so that the footer has something to sit under. You need to float those boxes side by side or place one statically and then absolutely position the other one alongside (as long as they are going to be the same height).

You really need to grasp this concept before you move on as you are making quite an easy job seem difficult When you absolutely place an element its as if it doesn't exist except for its visual representation. To all intents and purposes there is nothing there so other elements will take no notice of it and pretend its not there.

Hope that sheds some light on it

Paul

[RamsayX]

Hi Paul, sorry but I have done all that ... I just didnt have the latest uploaded Please have a look at this page:

http://adsbc.bc.ca/dev/public/public.jsp
It's much better now, but for some reason the footer won't clear the last div with the company partners in it ... do you know why?

[RamsayX]

I've added a 150px height to #columnClear to make it look like it clears everything, but it doesn't truly clear the last div still, thats what I need to figure out how to fix. The footer itself also doesn't seem to be completely centered on the page ... thats weird as well. It's set to clear both left and right floats.

On this page I appear to have gotten everything working:
http://adsbc.bc.ca/dev/public/oralHealth.jsp

Though I need to get that extraColumn (near the bottom where it says "Oral Health" in bold) to sit alongside the right content, but within the allContent id. That might be a bit tricky...

[RamsayX]

Anyone??

[Paul O'B]

Hi,

The footer seems to be clearing the content above even without the 150px height in columnclear so I'm not quite sure what you mean.

If you want to float that extra column to the right of the centre content then the float must come before the content (in the html that is) you need it to float alongside. So the rightcolumn will need to be at the top of the html for that centre content (unless the centre content is also floated then it doesn't matter).

You will need to make sure there is enough room for the elements to fit etc but I wasn't exactly sure where you were trying to put it.

Your pages do seem to be improving on each revision so try to keep things simple and logical.

Paul

[RamsayX]

Boy am I going to be glad when this is fixed.

Ok I've got the column up there now ... what a pain that was. Now is there a way to prevent the sections getting "pushed down" the screen when the window is resized smaller in width? It's quite annoying and I wonder if theres a way around this?

I'm using this page for the 3 column example to figure out:
http://adsbc.bc.ca/dev/public/careerInfo.jsp

[RamsayX]

Paul or anyone else ... ?

[Paul O'B]

Hi,

Sorry I haven't replied I've been busy

I've had a quick look and it seems that you need to adjust your widths more precisely. When using percentages for width try not to use pixels for padding and margins as they will never add up. If you need padding in pixels then you will need to nest the elements so that the outside width is consistent and the inner element has the padding.

You could change the css as follows and the element will not drop so soon and should be ok until about 800px wide.

#allContent {
 position:relative;
 overflow:visible;
 top:30px;
}
#content_sectionHeader {
 background-image:url(http://adsbc.bc.ca/dev/media/topStory.gif);
 background-repeat:no-repeat;
 height:23px;
 padding-top:2px;
 overflow:hidden;
}
#content_sectionText {
 position:relative;
 background-color:#FFFFFF;
 top:8px;
 padding-left:15px;
 overflow:visible;
}
#content_inlineImageContent {
 position:relative;
 width:70%;
 overflow:visible;
}
/* : -- Layout Elements -- : */
/* Column Wrappers */
#leftSide {
 position:relative;
 float:left;
 width:172px;
 overflow:visible;
 z-index:3;
}
#rightSide {
 width:58%;
 overflow:visible;
 z-index:2;
}
#extraColumn {
 position:relative;
 float:right;
 width:14%;
 margin-right:2%;
 overflow:visible;
 z-index:1;
 display:inline;/* ie double margin-fix*/
}

I shall probably have a bit more time tomorrow to look if you are still not happpy with it

Paul

[RamsayX]

Could someone have a look at this page please? I have a few pages on the members side that for some reason the footer won't clear the content ... I dont really understand it. Could you take a look please? Thanks!

http://adsbc.bc.ca/dev/members/members.jsp

This is another one of the same problem:
http://adsbc.bc.ca/dev/members/constitutionBylaws.jsp