3 equalizing col layout +header +footer

HTML & CSS
421

Hi,

Try adding this code to the end of the stylesheet and see if it fixes some (or all) of the problems you are experiencing.


* html #right {margin-left:-3px}/* defeat 3 pixel jog*/
* html #left {margin-right:-3px}/* defeat 3 pixel jog*/
* html #wrap{
 margin-left:227px;/* ie adds 3 pixels back on*/
 margin-right:227px;
}

Ie has a 3 pixel jog on floats and this may be causing the centre element to drop too soon. Try the code out and if it doesn’t work then post again. Remember to add the code at the end of all the stylesheets as it overwrites earlier definitions.

Paul

422

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 :wink:
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!

423

Hi Paul,

I’ve been trying to incorporate one of your 2-column layouts into a website I’m trying to improve. I must be doing something wrong because I can’t put any content into the left menu (navy coloured area). I need to insert a menu created in Fireworks, with rollovers. Whenever I try to insert anything in that part of the screen it goes in the middle content area, not the left. Are you able to tell me what I’m doing wrong please?
http://citylibrary.pncc.govt.nz/index3.html
Thanks,
Joanne

424

Hi,

You seemed to have taken out the html for the left column!
relevant CSS:


#left {
position:relative;/*ie needs this to show float */
width:160px;
float:left;
margin-left:-159px;/*must be 1px less than width otherwise won't push footer down */
color:#fff;
}
#left p {padding-left:3px;padding-right:2px}

relevant html:


<div id="outer"> 
<div id="clearheader"></div>
<!-- to clear header -->
<div id="left">
<p>Left content goes here</p>
</div>
<div id="centrecontent">
	<!--centre content goes here -->

Hope that helps.

Paul

425

Thanks Paul, I thought I’d probably done something like that. That will teach me for playing around with something I don’t understand. My knowledge of CCS is pretty much limited to font size/type/colour, etc.

This is happening to my page now http://citylibrary.pncc.govt.nz/index3.html

Joanne

426

Hi Joanne,

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

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).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">
<html xmlns="[http://www.w3.org/1999/xhtml](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

427

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!

428

Hi Chris,

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

Paul

429

!

430

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.

431

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.

<!–[if gte IE 5]>
<style type=“text/css”>
body {width:expression( documentElement.clientWidth < 800 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 800 ? “800” : “auto”) : “800px”) : “auto” );}
</style>
<![endif]–>
</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

432

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.


<div id="footer"> 
  [b]<div id="footer2"><img src="testimages/width.gif" width="705" height="10" alt=""></div>[/b]
  <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 :slight_smile:

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 :slight_smile:

Paul

433

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.

434

!

435

!

436

!

437

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?

438

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

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

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

439

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.


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

[/b]

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.


#mainNav ul {
[b]right:0px;[/b]
[b]etc......[/b]
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.


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

Paul

440

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