3 equalizing col layout +header +footer

**Paul O'B** · Oct 19, 2004 17:13

Hi Joanne,

I think my layout may be a step too far for you at this stage lol

You've mangled the html and the css I gave you. The css I gave you replaced the existing style but you put it underneath and missed out a bracket from the style above.

You also changed all the html so that it made no sense.

heres your code adjusted (except that I have taken the js out to shorten the code I paste here so put it back in).

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>
<title>Palmerston North City Library</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body {height:100%}
body {
 padding:0;
 margin:0;
 background:#000066;
 color: #000066;
}
#outer{
 height:100%;
 min-height:100%;
 margin-left:172px;
 background:#FFFFF2;
 border-left:1px solid #000;
 border-right:1px solid #000;
 margin-bottom:-52px;
 color: #000066;
}
 
html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
#header{
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:70px;
 background:#006699;
 border-top:1px solid #000;
 border-bottom:1px solid #000;
 overflow:hidden;
 color: #000066;
}
#left {
 position:relative;/*ie needs this to show float */
 width:172px;
 float:left;
 margin-left:-171px;/*must be 1px less than width otherwise won't push footer down */
}
#left p {padding-left:3px;padding-right:2px}
#footer {
 width:100%;
 clear:both;
 height:50px;
 border-top:1px solid #000;
 border-bottom:1px solid #000;
 background-color: #006699;
 color: #006699;
 text-align:center;
 position:relative;
}
* html #footer {/*only ie gets this style*/
 \height:52px;/* for ie5 */
 he\ight:50px;/* for ie6 */
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
div,p  {margin-top:0}/*clear top margin for mozilla*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */
</style>
<link href="/text.css" rel="stylesheet" type="text/css" />
<script language="JavaScript1.2" src="/test/images/mm_menu.js"></script>
</head>
<body>
<div id="outer"> 
  <div id="clearheader"></div>
  <!-- to clear header -->
  <div id="left"> 
	<div align="left"> 
	  <script language="JavaScript1.2" type="text/javascript">mmLoadMenus();</script>
	  <table border="0" cellpadding="0" cellspacing="0" width="170">
		<!-- fwtable fwsrc="menu.png" fwbase="menu.gif" fwstyle="Dreamweaver" fwdocid = "261752288" fwnested="0" -->
		<tr> 
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="170" height="1" border="0" id="undefined_2" /></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="1" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><img src="test/images/menu_r1_c1.gif" alt="" name="menu_r1_c1" width="170" height="20" border="0" id="menu_r1_c1" /></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><a href="#" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1018120059_0,170,0,null,'menu_r2_c1');"><img src="test/images/menu_r2_c1.gif" alt="" name="menu_r2_c1" width="170" height="20" border="0" id="menu_r2_c1" /></a></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><a href="#" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1018120639_1,170,0,null,'menu_r3_c1');"><img src="test/images/menu_r3_c1.gif" alt="" name="menu_r3_c1" width="170" height="20" border="0" id="menu_r3_c1" /></a></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><a href="#" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1018120949_2,170,0,null,'menu_r4_c1');"><img src="test/images/menu_r4_c1.gif" alt="" name="menu_r4_c1" width="170" height="20" border="0" id="menu_r4_c1" /></a></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><a href="#" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1018122640_3,170,0,null,'menu_r5_c1');"><img src="test/images/menu_r5_c1.gif" alt="" name="menu_r5_c1" width="170" height="20" border="0" id="menu_r5_c1" /></a></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><a href="#" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1018123040_4,170,0,null,'menu_r6_c1');"><img src="test/images/menu_r6_c1.gif" alt="" name="menu_r6_c1" width="170" height="20" border="0" id="menu_r6_c1" /></a></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><a href="#" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1018123334_5,170,0,null,'menu_r7_c1');"><img src="test/images/menu_r7_c1.gif" alt="" name="menu_r7_c1" width="170" height="20" border="0" id="menu_r7_c1" /></a></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><a href="#" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1018123612_6,170,0,null,'menu_r8_c1');"><img src="test/images/menu_r8_c1.gif" alt="" name="menu_r8_c1" width="170" height="20" border="0" id="menu_r8_c1" /></a></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><a href="#" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1018123914_7,170,0,null,'menu_r9_c1');"><img src="test/images/menu_r9_c1.gif" alt="" name="menu_r9_c1" width="170" height="20" border="0" id="menu_r9_c1" /></a></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><a href="#" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1018124102_8,170,-130,null,'menu_r10_c1');"><img src="test/images/menu_r10_c1.gif" alt="" name="menu_r10_c1" width="170" height="20" border="0" id="menu_r10_c1" /></a></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><img src="test/images/menu_r11_c1.gif" alt="" name="menu_r11_c1" width="170" height="20" border="0" id="menu_r11_c1" /></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><a href="#" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1018125542_9,170,0,null,'menu_r12_c1');"><img src="test/images/menu_r12_c1.gif" alt="" name="menu_r12_c1" width="170" height="20" border="0" id="menu_r12_c1" /></a></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><a href="#" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1018162309_10,170,-120,null,'menu_r13_c1');"><img src="test/images/menu_r13_c1.gif" alt="" name="menu_r13_c1" width="170" height="20" border="0" id="menu_r13_c1" /></a></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><a href="#" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1018162309_11,170,-190,null,'menu_r14_c1');"><img src="test/images/menu_r14_c1.gif" alt="" name="menu_r14_c1" width="170" height="20" border="0" id="menu_r14_c1" /></a></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><a href="#" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1018160629_12,170,-60,null,'menu_r15_c1');"><img src="test/images/menu_r15_c1.gif" alt="" name="menu_r15_c1" width="170" height="20" border="0" id="menu_r15_c1" /></a></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
		<tr> 
		  <td><a href="#" onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(window.mm_menu_1018130214_11,170,-20,null,'menu_r16_c1');"><img src="test/images/menu_r16_c1.gif" alt="" name="menu_r16_c1" width="170" height="20" border="0" id="menu_r16_c1" /></a></td>
		  <td><img src="test/images/spacer.gif" alt="" name="undefined_2" width="1" height="20" border="0" id="undefined_2" /></td>
		</tr>
	  </table>
	</div>
  </div>
  <div id="centrecontent"> 
	<!--centre content goes here -->
	<table width="100%" border="0" align="center" cellpadding="2" bordercolor="#000000">
	  <tr> 
		<td valign="top"><div align="center"> <img src="/images/welcome.jpg" width="342" height="158" alt="Palmerston North City Library" align="top" /><br />
			<img src="/images/welcomes_you2.gif" width="342" height="45" alt="welcomes you" /> 
			<div align="center"> 
			  <p>&nbsp;</p>
			  <p><a href="<A href="http://ipac.citylibrary.pncc.govt.nz:8080/ipac20/ipac.jsp?profile=pncl"><img">http://ipac.citylibrary.pncc.govt.nz:8080/ipac20/ipac.jsp?profile=pncl"><img src="/images/catalogue.gif" alt="Search the library catalogue" width="218" height="30" border="0" /></a></p>
			  <p><a href="/info2go.html"><img src="/images/info2go_logo_trans_button.gif" alt="info2go - access online resources from home using your library barcode number" width="142" height="60" border="0" /></a><strong><font color="#CC0000" size="1"><br />
				</font></strong></p>
			</div>
		  </div></td>
		<td valign="top"> <div align="center"> 
			<table width="210" border="0" align="center" cellpadding="0" cellspacing="0">
			  <tr> 
				<td bgcolor="#006699"><div align="center"> 
					<p><font color="#FFFFF2"><strong>Calendar of events</strong></font></p>
				  </div></td>
			  </tr>
			  <tr> 
				<td><table width="210" border="1" align="center" bordercolor="#006699" style="border-collapse: collapse">
					<tr> 
					  <td><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
						  <tr> 
							<td height="20" colspan="7"><p><strong><font color="#006699" size="1">October 
								2004 </font></strong></p></td>
						  </tr>
						  <tr> 
							<td width="20" height="20"><p align="center"><strong><font color="cc0000" size="1">Sun</font></strong></p></td>
							<td width="20" height="20"><p align="center"><strong><font color="cc0000" size="1">Mon</font></strong></p></td>
							<td width="20" height="20"><p align="center"><strong><font color="cc0000" size="1">Tues</font></strong></p></td>
							<td width="20" height="20"><p align="center"><strong><font color="cc0000" size="1">Wed</font></strong></p></td>
							<td width="20" height="15"><p align="center"><strong><font color="cc0000" size="1">Thurs</font></strong></p></td>
							<td width="20" height="20"><p align="center"><strong><font color="cc0000" size="1">Fri</font></strong></p></td>
							<td width="20" height="20"><p align="center"><strong><font color="cc0000" size="1">Sat</font></strong></p></td>
						  </tr>
						  <tr> 
							<td width="20" height="15"><p align="center"><font color="#FF3333"><font color="#CC0000"></font></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#FF3333"><font color="#CC0000"></font></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#FF3333"><font color="#CC0000"></font></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#FF3333"><font color="#CC0000"></font></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#FF3333"><font color="#CC0000"></font></font> 
							  </p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1"><a href="/test/images/calendar/calendar_oct04.html#1">1</a></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">2</font></p></td>
						  </tr>
						  <tr> 
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">3</font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1"><a href="/test/images/calendar/calendar_oct04.html#4">4</a></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">5</font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1"><a href="/test/images/calendar/calendar_oct04.html#6">6</a></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1"><a href="/test/images/calendar/calendar_oct04.html#7">7</a></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1"><a href="/test/images/calendar/calendar_oct04.html">8</a></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1"><a href="/test/images/calendar/calendar_oct04.html#9">9</a></font></p></td>
						  </tr>
						  <tr> 
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">10</font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">11</font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">12</font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">13</font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1"><a href="/test/images/calendar/calendar_oct04.html#14">14</a></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1"><a href="/test/images/calendar/calendar_oct04.html#15">15</a></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1"><a href="/test/images/calendar/calendar_oct04.html#16">16</a></font></p></td>
						  </tr>
						  <tr> 
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1"><a href="/test/images/calendar/calendar_oct04.html#17">17</a></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">18</font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">19</font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">20</font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1"><a href="/test/images/calendar/calendar_oct04.html#21">21</a></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1"><a href="/test/images/calendar/calendar_oct04.html#22">22</a></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">23</font></p></td>
						  </tr>
						  <tr> 
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">24</font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">25</font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">26</font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">27</font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1"><a href="/test/images/calendar/calendar_oct04.html#28">28</a></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1"><a href="/test/images/calendar/calendar_oct04.html#29">29</a></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#CC0000" size="1">30</font></p></td>
						  </tr>
						  <tr> 
							<td width="20" height="15" valign="middle"><p align="center"><font color="#CC0000" size="1">31</font></p></td>
							<td width="20" height="15"><p align="center"><font color="#FF3333"><font color="#CC0000"></font></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#FF3333"><font color="#CC0000"></font></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#FF3333"><font color="#CC0000"></font></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#FF3333"><font color="#CC0000"></font></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#FF3333"><font color="#CC0000"></font></font></p></td>
							<td width="20" height="15"><p align="center"><font color="#FF3333"><font color="#CC0000"></font></font></p></td>
						  </tr>
						</table></td>
					</tr>
				  </table></td>
			  </tr>
			</table>
		  </div>
		  <div align="center"> </div>
		  <p> </p>
		  <table width="210"  border="0" align="center" cellpadding="0" cellspacing="0">
			<tr> 
			  <td width="210" bgcolor="#006699"><div align="center"> 
				  <p><font color="#FFFFF2"><strong>What's new? </strong></font></p>
				</div></td>
			</tr>
			<tr> 
			  <td><table width="210" border="1" align="center" bordercolor="#006699" style="border-collapse: collapse">
				  <tr> 
					<td><p align="left"><font size="1"><strong><a href="/test/resources_and_services/fiction.html"><font 
color="#cc0000">Maurice Shadbolt, 1932-2004</font></a></strong></font><font 
color="#cc0000" size="1"><br />
						Information about him and his books</font></p>
					  <p align="left"><strong><font size="1"><a 
href="/calendar/calendar_oct04.html"><font color="#cc0000">What's on in October?</font></a></font><font color="#cc0000" size="1"><br />
						</font></strong><font 
color="#cc0000" size="1">Check our Calendar for details of <br />
						some exciting events </font></p>
					  <p align="left"><strong><a href="/test/events/guitar_quiz.html"><font color="#cc0000" 
size="1">Guitar Quiz</font></a><font color="#cc0000" 
size="1"><br />
						</font></strong><font color="#cc0000" size="1">Winners 
						and answers</font> </p>
					  <p align="left"><font size="1"><strong><a 
href="/resources_and_services/sound_and_vision.html"><font 
color="#cc0000">Christopher Reeve, 1952-2004<br />
						</font></a></strong><font 
color="#cc0000">Information about him <br />
						and his books and movies</font></font></p></td>
				  </tr>
				</table></td>
			</tr>
		  </table>
		  <p> </p></td>
	  </tr>
	</table>
  </div>
  <div id="clearfooter"></div>
  <!-- to clear footer -->
</div>
<!-- end outer div -->
<div id="footer"> 
  <p align="right"><strong><font color="#FFFFF2" size="1">(c) Palmerston North 
	City Library - </font></strong><font color="#FFFFF2" size="1"> </font><font color="#FFFFF2"><font size="1"><br />
	Best viewed with 1024/768 screen or higher, optimized for IE 6.0</font></font></p>
</div>
<div> 
  <p align="right"></p>
</div>
<div id="header"> 
  <div align="right"> 
	<!-- KW ARI Image -->
  </div>
</div>
</body>
</html>

You may be better off with a simpler version and using a background image for the left column and then you wouldn't need to worry about the negative margin techniques.

Paul

**ChrisS** · Oct 20, 2004 17:11

Paul you should be payed for this. Great stuff.

I am a new web designer and I am starting with CSS layouts. You are an inspiration man!

**Paul O'B** · Oct 21, 2004 05:16

Hi Chris,

Thanks for the comments and glad you found the threadof some use

Paul

**DaveB2** · Oct 23, 2004 18:56

!

**kmurphy** · Oct 23, 2004 19:55

Originally Posted by kmurphy

You are a genius! Not only have you got my page working properly now, you have saved enough of my hair that re-population is plausible

The 3 pixel jog, that was the cause of my previous problem as well... hopefully now I will have learned my lesson... I have just covered my wall with yellow stickies that say '3-pixel jog!! Remember the 3-pixel jog!!' and " It wasn't voodoo, it was the 3-pixel jog!"...
Thanks again!

Ok, one more question, and I am sure it has something to do with the 3-pixel jog... and that IE doesn't seem to deal with min-width (does it at all??) the same as Firefox... but on a page that has an image in the center column, when the window is resized to a certain point, IE pushes the content right down, where as Firefox keeps it at the top of the page... I decided to make the images smaller to help combat a bit... but an example of this is on this page:
http://stanley.server309.com/programs/urbanWildlife/

Thanks again for your help.

**Paul O'B** · Oct 24, 2004 03:57

Hi Kmurphy,

IE pushes the content right down, where as Firefox keeps it at the top of the page

This is caused by ie's infamous float drop. Although there is nowhere for the float to go ie will still try and drops it below the column to the side. Unfortunately it can't get under said column so it stays there. It's not a problem specific to my layout but a behaviour of floats in general in ie.

In certain circumstances you can avoid the problem by using some convoluted css and extra nestings and changing the order of the columns in the html. If you look at my 3 col demo and look at the source ordered 3 col version I think you'll find that the centre column won't drop. (However I believe one of the side columns may drop instead.)

As you have offered min-width to good browsers then I think the logical solution is to offer min-width to ie as well.

I know some people don't like this following method using expressions because its not valid css, however I think its such a simple fix and works very well in IE5 upwards (even with js turned off) that its a useful technique.

Add this code to the head of your page. You could of course link to it instead placing the link inside the conditional comments.

</head>

That will restrict the page width to 800px and stop the page from dropping. Conditional comments are only read by ie so no other browsers will be bothered with the expression. The page will still validate (although its invalid code) although thats only because the validator can't see the code inside the conditional comments.

Hope that helps.

Paul

**Paul O'B** · Oct 24, 2004 04:16

HI Badrad,

I'm not quite sure what effect you are after stil unless you are just trying to set a min-width etc.

You have placed a 700px image at the top of the content to hold the page open and keep the columns at the side. Is this what you are talking about?

If thats all you want to do and want to do the same for the footer then just put that image in your #footer2 style also and that will force the footer to stay with the rest of the page.

e.g.

Code:

<div id="footer"> 
  <div id="footer2"><img src="testimages/width.gif" width="705" height="10" alt=""></div>
  <div id="fleft"><img src="testimages/footerleft.gif" alt=""> </div>
  <div id="fright"><img src="testimages/footerright.gif" alt=""></div>
</div>

I'm not sure if thats exactly what you meant anyway

For mozilla you can simply set a min-width on the elements to hold the page open but ie doesn't understand min-width which is why I think you are using a (spacer type) image.

However you may wish to look at the answer I gave to kmurphy above as that was a min-width issue also.

Sorry If i've got the wrong end of the stick but I couldn't quite see what you meant by the right column huggging the side because thats what it does by default anyway

Paul

**kmurphy** · Oct 24, 2004 14:46

Hi Paul and thanks again for the great info. I have opted for 'simply' making a bit more room... making the side columns a bit smaller and a hope that folks using IE on small screens will know enough to adjust their browser...
Now I know I said "one more question..." but... in my tinkering I seem to have developed another small glitch in my code...
In IE I am getting a small 'border' (not sure what it is, a positioning error that makes it look like a border) on the sites home page. The fern background image is not sitting flush with the centerContent div. It is sitting fine in Firefox but IE not so much... http://stanley.server309.com/

oh and while I am at it, I should ask, in firefox I get a horizontal scroll-bar, not in IE (for a change IE is not the problem!). The scroll bar is not a big deal, but it would be better if it didn't show up when there really is no reason for horizontal scrolling. I suspect this is perhaps a result of the floats overlapping as well??

Any ideas why this thes issues are occuring?
Once again, thanks for the great help.

**DaveB2** · Oct 24, 2004 19:57

!

**DaveB2** · Oct 25, 2004 01:35

!

**DaveB2** · Oct 25, 2004 02:06

!

**Willigogs** · Oct 25, 2004 03:36

Hi Paul,

I'm using your "3 Column Centred" template, but am experiencing a minor issue which I'm not sure how to fix?

Basically, if we look at your example:

http://www.pmob.co.uk/temp/3colcentred_2a.htm

It works perfectly for what I need. However, I am using images for the Header, Body and Foooter that need to line up pixel perfect. For some reason, the image BG for the Body is sometimes 1 pixel further to the right? This can change depending on how "stretched" the browser is, etc. It seems to pop in and out if you play with the width of the browser.

I managed to fix this problem by moving the BG image from the Body to the #outer div, but I'm now having a problem whereby if you shrink the browser so that you get horizontal scrollbars, the footer decides to move 1 pixel to the left!? I think this happens on your example too.

Any ideas of how I could fix this?

**Paul O'B** · Oct 25, 2004 05:20

Originally Posted by badrad

I've made some very good progress, only one left thing to figure out, if i cant figure it out myself in a bit ill post it, just letting you know Paul dont bother worring about this anymore.

Sorry I didn't get a reply in quicker but we are obvioulsy on different time zones lol

It sounds as though you have a good idea of what you are doing now anyway

Regarding z-indexes the ability to put a child div behind its parents background has been changed. You can manipultae the order of the children but they will not go below the parent reliably (although some broswers will do this with negative z-indexes).

Elements that are not nested will be able to be positioned above and below as required with no problems. Note that the parents z-index dictates whether another block of nested elements overlap or not.

As you found out an element needs a position defined (absolute or relative) before z-indexing will take effect.

Paul

**Paul O'B** · Oct 25, 2004 06:41

Hi Kmurphy,

The gap in your image is caused because you have set left content to 90% which is too wide and things are getting ushed wide.

Try this instead.

Code:

.rightItem {
border:thin dotted #385E0F;
padding:4px 7px;
margin:10px 0;
width:146px;
}
* html #right { padding-bottom:52px;}
/* commented backslash hack v2 \*/ 
* html #rightContent{height:1%;}
/* end hack */

The scrollbar in mozilla is because you have set the mainnav to be right by -1px which obviously takes it off screen and forces a scrollbar. Setting it to right:0 will get rid of the scrollbar.

Code:

#mainNav ul {
right:0px;
etc......

Edit:

I see that there is a gap in ie which is why you probably used the above so give ie the negative margin only.

Code:

* html #mainNav ul {right:-1px;}

Paul

**Paul O'B** · Oct 25, 2004 08:12

Hi Willigogs,

Yes Ie will round background elements that are o the body at a different rate to the other elements (for some strange reason) so you get the 1 pixel jog on odd pixel sizes.

As you found out that moving the background image to another element solves the problem. (This is fine when you have a spare element that doesn't have a background image already.)

I didn't notice the footer jogging when the horizontal scrollbar appears although it wouldn't surprise me.

Perhaps this method may be better because the footer is contained within the outer and not outside of it.

http://www.pmob.co.uk/temp/3colcentred_example.htm

It looks ok as it is but of course there are no images lined up to check etc.

Hope it helps anyway.

Paul

**Willigogs** · Oct 25, 2004 08:36

Originally Posted by Paul O'B

Perhaps this method may be better because the footer is contained within the outer and not outside of it.

http://www.pmob.co.uk/temp/3colcentred_example.htm

It looks ok as it is but of course there are no images lined up to check etc.

Hope it helps anyway.

Paul

Fantastic -that example looks perfect! Did I miss this one from your homepage?

Thanks Paul

**Paul O'B** · Oct 25, 2004 08:59

Did I miss this one from your homepage?

No - I'm afraid I've got examples scattered everywhere lol.

I can't seem to find the time to update them all and put them in some logical order. I will get around to it some time

Paul

**Robcau** · Oct 27, 2004 13:15

i've seen this post, but i don't get it but i think this is a simular thing of my problem:

http://www.sitepoint.com/forums/show...19#post1471719

am i right?

**Paul O'B** · Oct 27, 2004 16:02

Hi Robcau,

I have replied in the other thread.

As a rule of thumb its best not to double post as it may upset some members

Paul

**jasmanac** · Nov 3, 2004 07:24

Hi Paul,

Here I am

I was working on my Yellow Pages project and right now it's pretty done but I have one problem with expanding divs which I can't solve myself. Here is a link to my page with expandings divs so if you have some free time to look at this code I'll appriciate that. Just take a look on the bottom of the page and you'll see this olive links which represents comments. The problem persist when you click on this link to expand desired comment. I tried to fix this but without anu success

thanks in advance,
Jazz

**Paul O'B** · Nov 3, 2004 09:55

Hi,

This looks like a js problem where the absolute footer isn't being re-drawn after you've toggled the element on.

You could hide the footer when you toogle the element and then turn it back on afterwards which should cure the problem.

Check my JS - but this seems to work:

Code:

<script type="text/javascript" language="javascript">
function Toggle(item) {
  obj=document.getElementById(item);
   document.getElementById("footer").style.display="none";
  visible=(obj.style.display!="none")  
  if (visible) {
	obj.style.display="none";
  } else {
	 obj.style.display="block";
  }
   document.getElementById("footer").style.display="block";
}
</script>

In firefox your expanding comments have been restricted to a height of 20px which is not enough. Take the height out altogether.

Code:

.komentarOff {
 display: block;
 margin-top: 10px;
 background-image: url(http://www.yuyellow.com/temp/yp/imag...n_komentar.gif);
 background-repeat: no-repeat;
 background-position: 0em 0em;
 margin-left: 50px;
 padding-left: 20px;
}
.komentarOn {
 display: block;
 margin-top: 10px;
 background-image: url(http://www.yuyellow.com/temp/yp/imag...n_komentar.gif);
 background-repeat: no-repeat;
 background-position: 0em 0em;
 margin-left: 50px;
 padding-left: 20px;
}

Hope that helps.

Paul

**jasmanac** · Nov 4, 2004 01:59

Thanks man

Now all works perfect

**kmurphy** · Nov 9, 2004 13:04

I have editied my original post quite a bit...

Hi again Paul,
I just downloaded and installed Firefox 1.0. Then I went to the site i am developing and using your 3-col layout. A while back and a fair bit of tinkering later I finally got four divs that contained text and a thumbnail image to line up in two by two layout. They were different sizes so minimum height would have helped if IE supported it... but aside from that I finally had it floating and clearing properly in IE and Firefox.9 When I recently went back to that page and viewed it in the new Firefox 1.0, it was applying the clear rules to the content in the left column so the four divs now flow way down below the left columns navigation as opposed to sitting where they should under the main content, clearing only the last paragraph of the center content div. Since my original post I have been attempting many different ways of achieving this but it doesn't seem to want to work in both browsers...

I have set the four divs up with the first floating left, the second floating left and clearing right, the third floating left and the fourth floating left. I thought that would get them to all float in a 2x2 format... but they are not the same heights and ie doensn't deal with minheight so... next up I grouped them in 2 divs. So the top two in one div, with a float left and a clear right and the bottom 2 in another div with a float left. That seemed that worked but Firefox1.0 pushed the div way down next to the bottom of the left column navigation. So I assume that clear left was applying to it...

So then I removed it and now just have them floating left, and it seems to be the best option, but in IE if the widow is expanded enough, they just don't sit in 2X2, it ends up being a 3X1...

Any ideas on what I am doing wrong here? I am quite sure it was sitting properly in both IE and Firefox0.9, and am arroganlty thinking that it is the new Firefox1.0 which is causing the problem as opposed to my own bad grasp of all this css voodoo...
here is where you can see the issue:

http://stanley.server309.com/program...dlife/coyotes/

The same thing is occurring on this page as well

http://stanley.server309.com/program...dex.php#sunday

Thanks.

**Paul O'B** · Nov 10, 2004 10:40

Hi,

Sorry for the late reply

The page seems to look ok in Firefox 0.9 and ie6 now (I haven't had time to download firefox 1.0 yet). Is it the 4 images in the centre column that you are talking about?

When you cleasr a float you are telling the float to clear any other floats above it in the document. This could mean that the float will try to clear your left column because that is a float (opera will occasionally do this as will some other browsers). Just beacuse your centre floats are in a different div makes no difference.

The usual solution is to include the floated elements in an element that is itself floated and this seems to contain the clearing of the floats to within that element.

I'm not sure if this was the problem you were experiencing in firefox 1.0.

Ie6 looked ok and if you want to keep the floats 2 abreast then you will need to a clear:left to the third float to stop it going up alaongside the second on wide screens.

If you want a consistent height then you can wrap each pair of loats in an element and apply a min-height to it. Then for ie use * html #elementname{height:300px) or whatever height you want. IE treats height almost as min-height anyway and will expand when required, but you need to hide it from the other browsers (and iemac so also use the double backslash mac hididng hack).

Hope thats given you some ideas

Paul

**rafiq** · Nov 13, 2004 21:37

If you want a consistent height then you can wrap each pair of loats in an element and apply a min-height to it. Then for ie use * html #elementname{height:300px) or whatever height you want. IE treats height almost as min-height anyway and will expand when required, but you need to hide it from the other browsers (and iemac so also use the double backslash mac hididng hack).

User Tag List

Thread: 3 equalizing col layout +header +footer

Thread Tools

Display

'border' and scroll bar

Firefox1.0 and clear seems to be clearing a bit too much...

Bookmarks

Bookmarks

Posting Permissions