SitePoint.com

quadrant6 · Oct 25, 2006, 22:19

Reasonably simple 3 col layout. L and R side panels both floated. The Middle column L and R margin width = side panel widths.

It's fine in Safari, Firefox and even IE 5.2 (Mac)! but in IE on windows, it goes to a mess.

This is how it should look:

Perhaps there is a better way to do it?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>test</title>

<style>
	html,body {margin:0;padding:0}
	
	body{
		margin: 0;padding: 0;
		color: #333;
		background: #8B8B8B;
		text-align: center;
	}	
	#container{
		line-height: 145%;
		width: 780px;
		margin: 0px auto;
		text-align: left;
		background: #fff ;
	}
	#header{
		height:100px;
		width:605px;
		background-color: #fff;
		padding: 15px 0 0 20px;
	}
	#logo{
		margin-left: 45px;
		width: 312px;
		height: 78px;
	}
	#primary-nav{
		float: left;
		width: 145px;
		background-color: #DEDEDE;
	}
	#main{
		background-color: yellow;
		margin: 0 175px 0 145px;
		width: 460px;
	}
	#side-panel{
		width: 175px;
		background: purple;
		float: right;
	}
	#login-panel{
		background-color: green;
	}
	#footer{
	background: #ccc;
	clear: both;
	}
	/* mac hide - fix for footer height, again IE win \*/
	* html #footer{height:1%}
	/* and hide */
</style>
</head>

<body>

<div id="container">
	<div id="side-panel">
		<img src="image.jpg" width="175" height="200" />
		
		<div id="login-panel">login panel here</div>
	</div>

	<div id="header"><img id="logo" src="logo" /></div>

	<div id="primary-nav">
		<ul>
			<li>link</li>
			<li>link</li>
			<li>link</li>
			<li>link</li>
		</ul>
	</div>
	
	<div id="main">Main.. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.</div>

	<div id="footer">footer here</div>
</div>

</body>
</html>

Tyssen · Oct 25, 2006, 23:13

It could be either the 3-pixel gap or double margins.

quadrant6 · Oct 26, 2006, 14:06

Thanks, I've made some adjustments which seem to have helped (floated header left, added #inner-container to clear header and hold #primary-nav and #main) - it's alsmost there but the #main (yellow) div is being forced down for some reason.

I have a feeling the 3px jog may be causing an issue but my fixes don't seem to be working..

If I reduce the width the of the #main div by 6px, it slides up (leaving a 3px gap on both sides).

see test page

The issue is occuring in IE win and IE mac now. Fine in all others

Paul O'B · Oct 26, 2006, 15:09

Hi,

yes its the 3px jog and is explained in detail in the faq on floats. You need to offset the 3px for ie on bothe the floats and also adjust the content margins as well by 3px.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>test</title>
<style type="text/css">
	html,body {margin:0;padding:0}
	
	body{
		margin: 0;padding: 0;
		color: #333;
		background: #8B8B8B;
		text-align: center;
	}	
	
	#container{
		line-height: 145%;
		width: 780px;
		margin: 0px auto;
		text-align: left;
		background: #fff ;
	}
	
	#header{
		height:100px;
		width:605px;
		float:left;
		background-color: blue;
		
	}

	#header #logo{
		margin: 15px 0 0 45px;
		width: 312px;
		height: 78px;
	}
	
	#primary-nav{
		float: left;
		width: 145px;
		background-color: #DEDEDE;
		clear:left;
		margin-right:-3px;
	}

	#main{
		background-color: yellow;
		margin: 0 175px 0 145px;
		width: 460px;
	}

	#side-panel{
		width: 175px;
		background: purple;
		float: right;
		margin-left:-3px;
	}
	
	#login-panel{
		background-color: green;
	}
	
	#footer{
		background: #ccc;
		clear: both;
	}
/* mac hide - fix for footer height, again IE win \*/
* html 	#main{	margin: 0 172px 0 142px;}
* html #footer{height:1%}
/* and hide */

</style>
</head>
<body>
<div id="container">
	<div id="side-panel"> #sidepanel<img src="image.jpg" width="175" height="200" alt="" />
		<div id="login-panel">login panel here</div>
	</div>
	<div id="header"><img id="logo" src="logo" alt="" />#header</div>
		<div id="primary-nav">
			<ul>
				<li>#primary-nav</li>
				<li>link</li>
				<li>link</li>
				<li>link</li>
			</ul>
		</div>
		<div id="main">#main.. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.pis egestas. erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.pis egestas. erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.pis egestas. erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.pis egestas. erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.</div>
	<div id="footer">#footer here</div>
</div>
</body>
</html>

Read the faq on floats for further explanation. You will be pleased to know that this has been fixed in ie7

quadrant6 · Oct 26, 2006, 16:56

Thanks Paul

In the FAQ, the example has:

Code:

 * html #leftelement {margin-right:-3px}

But in the code you posted, it doesn't use the * selector, it just applies -3px directly to the #side-panel and #primary-nav. It works

but I don't understand why it doesn't cause probs in Non-IE browsers?

I'd like to add padding around the text in the #main div. At first I just applied to padding to the #main but this caused issues so instead I added a #inner-content div inside #main and gave it a margin. This works in IE but in Mozilla browsers, it doesn't apply the margin to the top/bottom instead seemingly applying a top margin to the #container (pushing the whole layout down).

updated test page

In ie (mac), the #main div splurges out to the right. This seems to be a problem I haven't encountered before and I'm not sure that it relates to the Float issues documented in the FAQ - any ideas?

Paul O'B · Oct 26, 2006, 17:26

Hi,

I was just lazy and didn't add didn't separate the negative margins into ie only code. However they will do no harm as negative margins on floats are complicated subjects and when you apply left negative margin to a right float (and vice versa) it doesn't change the position but allows space so that elements can approach.

http://blog.html.it/layoutgala/

In your layout we can reduce all the hacks by simply floating everything and avoid all the three pixel jogs. Just keep everything in its columns.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>test</title>
<style type="text/css">
	html,body {margin:0;padding:0}
	body{
		margin: 0;padding: 0;
		color: #333;
		background: #8B8B8B;
		text-align: center;
	}	
	
	#container{
		line-height: 145%;
		width: 780px;
		margin: 0px auto;
		text-align: left;
		background: #fff ;
	}
	#left{
		float:left;
		width:605px;
 }
	#right{
		float:right;
		width:175px;
	}
	#header{
		height:100px;
		width:605px;
		background-color: blue;
	}

	#header #logo{
		margin: 15px 0 0 45px;
		width: 312px;
		height: 78px;
	}
	#primary-nav{
		float: left;
		width: 145px;
		background-color: #DEDEDE;
		clear:left;
	}

	#main{
		background-color: yellow;
		width: 400px;
		float:left;
		padding:30px;
	}
	* html #main{width:460px;w\idth:400px}/* box model hack */

	#side-panel{
		width: 175px;
		background: purple;
	}
	
	#login-panel{
		background-color: green;
	}
	
	#footer{
		background: #ccc;
		clear: both;
		width:780px;
	}

</style>
</head>
<body>
<div id="container">
	<div id="right">
		<div id="side-panel"> #sidepanel<img src="image.jpg" width="175" height="200" alt="" />
			<div id="login-panel">login panel here</div>
		</div>
	</div>
	<div id="left">
		<div id="header"><img id="logo" src="logo" alt="" />#header</div>
		<div id="primary-nav">
			<ul>
				<li>#primary-nav</li>
				<li>link</li>
				<li>link</li>
				<li>link</li>
			</ul>
		</div>
		<div id="main"> #main.. Curabitur eleifend wisi iaculis ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.pis egestas. erat eget elementum volutpat, dolor nisl
			porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.pis egestas. erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo.pis egestas. erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula.
			Maecenas mattis pulvinar diam. Curabitur sed leo.pis egestas. erat eget elementum volutpat, dolor nisl porta neque, vitae sodales ipsum nibh in ligula. Maecenas mattis pulvinar diam. Curabitur sed leo </div>
	</div>
	<div id="footer">#footer here</div>
</div>
</body>
</html>

IE5 mac is dead and unless you have to then I wouldn't bother. The floated layout above may fare better than your original but I wouldn't hold my breath

quadrant6 · Oct 26, 2006, 20:46

Thanks heaps Paul - that's much nicer, I had a feeling my layout scheme could have been done in a better way. Note: the new version looks good in ie mac

- but you're right, it's probably not worth the effort

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Oct 25, 2006, 23:13	#2
Tyssen SitePoint Wizard Join Date: Oct 2005 Location: Brisbane, QLD Posts: 4,024	It could be either the 3-pixel gap or double margins.

Oct 26, 2006, 14:06	#3
quadrant6 SitePoint Enthusiast Join Date: Oct 2004 Posts: 46	Thanks, I've made some adjustments which seem to have helped (floated header left, added #inner-container to clear header and hold #primary-nav and #main) - it's alsmost there but the #main (yellow) div is being forced down for some reason. I have a feeling the 3px jog may be causing an issue but my fixes don't seem to be working.. If I reduce the width the of the #main div by 6px, it slides up (leaving a 3px gap on both sides). see test page The issue is occuring in IE win and IE mac now. Fine in all others Last edited by quadrant6; Oct 26, 2006 at 14:41.

Oct 26, 2006, 16:56	#5
quadrant6 SitePoint Enthusiast Join Date: Oct 2004 Posts: 46	Thanks Paul In the FAQ, the example has: Code: * html #leftelement {margin-right:-3px} But in the code you posted, it doesn't use the * selector, it just applies -3px directly to the #side-panel and #primary-nav. It works but I don't understand why it doesn't cause probs in Non-IE browsers? I'd like to add padding around the text in the #main div. At first I just applied to padding to the #main but this caused issues so instead I added a #inner-content div inside #main and gave it a margin. This works in IE but in Mozilla browsers, it doesn't apply the margin to the top/bottom instead seemingly applying a top margin to the #container (pushing the whole layout down). updated test page In ie (mac), the #main div splurges out to the right. This seems to be a problem I haven't encountered before and I'm not sure that it relates to the Float issues documented in the FAQ - any ideas?

Oct 26, 2006, 20:46	#7
quadrant6 SitePoint Enthusiast Join Date: Oct 2004 Posts: 46	Thanks heaps Paul - that's much nicer, I had a feeling my layout scheme could have been done in a better way. Note: the new version looks good in ie mac - but you're right, it's probably not worth the effort