[SOLVED] help: IE6 fluid layout problem (hidden left content bar)

punjabisingh · #1 (**permalink**) 06-21-08, 04:26 PM

I'm working on a fluid/centered layout for one of my sites, but
The following html/css works on all browsers I use: FF2, IE7, Opera 9, but doesn't work on IE6. So only in IE6, the left content bar gets hidden on one side. I tried desparately to brute force something, but I have limited skills in css with browser compatibility stuff. Please help!

html:

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" xml:lang="en" lang="en">
<head>

      <title>title</title>
<link rel="stylesheet" type="text/css" media="screen" href="test.css" />
</head>

<body>
<div id="header">

	<div id="header_inner" class="fluid">
		<div id="logo">
			<h1><span><a href="/">h</a></span></h1>
		</div>
	</div>
</div>

<div id="main">


<div id="main_inner" class="fluid">

	<div id="contentwrapper2">
		<div id="contentcolumn2">

	yeah lots of content here
	sdfoiusdffoisdf	sdfoiusdffoisdf
	sdfoiusdffoisdf
	sdfoiusdffoisdf
	sdfoiusdffoisdf Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	
		</div>

	</div>
		
	<div id="leftcolumn2">

			<h4><span>testcat</span> now</h4>
<ul class="links">
<li><a href="/show/id/1">2</a></li>
<li><a href="/show/id/2">1</a></li></ul>

	</div>

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

</div>
</div>

</body>
</html>

css:

Code:

/* This controls the width of the fluid width layouts */

div.fluid
{
width: 90% !important;
}

/* Header */

#header
{
width:100%;
height:122px;
background: #440000 url('../images/n1.gif') repeat-x;
}

#header_inner
{
position: relative;
width: 950px;
height:122px;
margin: 0 auto;
}

/* Logo */

#logo
{
position: absolute;
bottom: 0.6em;
}

#logo h1
{
display: inline;
color: #fff;
font-size: 2.6em;
}

/* Main */

#main
{
background: #fff url('../images/n2.gif') 0px 1px repeat-x;
}

#main_inner p
{
text-align: justify;
margin-bottom: 2.0em;
}


#main_inner
{
position: relative;
width: 950px;
margin: 0 auto;
padding-top: 3.5em;
}

/* LAYOUT - 2 COLUMNS REDONE 2nd time!!! */
#contentwrapper2 {
float:left;
width:100%;
}
#contentcolumn2 {
margin-left:200px;
	padding: 2em;
}
#leftcolumn2 {
float:left;
margin-left:-100%;
width:170px;
	padding: 3em 0em 0.5em 2em;
	border-left: dotted 1px #E1E1E1;
}

#footer2 {
clear:left;
color:#FFFFFF;
padding:4px 0pt;
text-align:center;
width:100%;
}
#footer3 {
background-color:#6666CC;
border:1px solid #000000;
margin-top:20px;
padding:10px;
text-align:center;
}

punjabisingh · #2 (**permalink**) 06-21-08, 08:58 PM

actually I figured this one out already. I don't know why IE6 was so different, but changing the div.fluid to 100% width, eliminated the bug. Now although my layout looks different because its not pushed in from right/left side, it works similarly in all browsers (and I am happy with it).