Log in

View Full Version : Three column layout not working in IE?


fifi
06-17-2008, 06:06 PM
Im still quite new to css and had a look at the three column layout #3.6- (fluid-fixed-fluid) in the dynamic drive css library.
This is perfect for what i want to achieve but i needed the content column (fixed column) to be the largest in the centre.
I changed the div sizes to go along with what the css comments stated, and it all works fine. however it is a complete mess in IE and the layout is all over the place?
Could someone tell me if there is a way to fix this? Is it something to do with the negative margins?

This is the code from css library. I have added what i changed the sizes to in the comments.


#contentwrapper{
float: left;
width: 100%;
margin-left: -20%; /*my sizes -25%;*/
}

#contentcolumn{
margin: 0 190px 0 20% /* my sizes 0 800px 0 25% */
}

#leftcolumn{
float: left;
width: 190px; /*my sizes 796px*/
margin-left: -190px; /*my sizes -800px*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 20%; /* my sizes 25%; */
background: #FDE95E;
}


would really appreciate any help... :)
rangana
06-18-2008, 12:56 AM
We need to see the markups (HTML) as well.
fifi
06-18-2008, 03:20 PM
Do you mean all the code. In as all the html and css?
I've pasted it below... :)


<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>title</title>
<link rel="stylesheet" type="text/css" href="menu_style4.css" />
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
background: #666666 ;
}

b{font-size: 110%;}
em{color: red;}

#topsection{
background: url(images/ball.gif);
width:100%;
height: 25px; /*Height of top section*/
}
#topsection h1{
width:222px;
margin-left:30%;
padding: 0 20px;
color:black;
background:#666666 ;
font-family:verdana;
font-size:20px;
text-align:left;
letter-spacing:14px;
}
#filler{
background: url(images/ball.gif);
width:100%;
height:100px;
}


#sitewrapper{
min-width:1068px;
margin:0 auto;

}
#contentwrapper{
width:100%;
float: left;
margin-left: -25%; /*Set left margin to -(RightColumnWidth)*/
}

#contentcolumn{
margin: 0 800px 0 25% ;/*Set margin to 0 (LeftColumnWidth) 0 (RightColumnWidth)*/
height: 600px;
border-right: 0;
background: url(images/ball.gif);
overflow:hidden;
}

#main{
float: left;
width: 796px; /*Width of left column in pixels*/
margin-left: -800px; /*Set left margin to -(LeftColumnWidth)*/
background: #999999;
border:black dashed 2px;
}

#rightcolumn{
float: left;
width: 25%; /*Width of right column in percentage*/
height: 600px;
background: url(images/ball.gif);
overflow:hidden;
}

#footer{
clear: left;
width: 100%;
margin-left:0;
background: url(images/ball.gif);
color: #FFF;
text-align: center;
padding: 4px 0;
height:60px;
}

#footer a{
color: #FFFFFF;
text-decoration:none;
}

.innertube{
margin: 0px; /*Margins for inner DIV inside each column (to provide padding)changed for 10*/
margin-top: 0;
}


/*start of gallery/////////*/
#gallerywrapper {
width:800px;
min-width: 800px;
margin: 0 auto;


}

.gallerycontainer{
position: relative;
background:none;
height:490px;
width:688px;
margin:30px auto;
}

.thumbnail img{
border: none;
margin: 0 0 0 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px dashed black;
}

.thumbnail span{
position: absolute;
background:none;
padding: 5px;
left: -1000px;
border: 1px dashed black;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{
border-width: 0;
padding: 30px;
}

.thumbnail:hover span{
visibility: visible;
top: 0;
left: 230px;
z-index: 50;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>
<body>
<div id="sitewrapper">


<div id="topsection"><div class="innertube"><h1>header</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">

</div>
</div>
</div>
<div id = "gallerywrapper">

<div id="main">
<div id="con_nav"> <br>
<br>
<ul id="navigation-1">
<li><a href="#" >Home</a></li>
<li><a href="#" >images</a>
<ul class="navigation-2">
<li><a href="#">portfolio</a></li>
<li><a href="#">music<span>&raquo;</span></a>
<ul class="navigation-3">
<li><a href="#">comp1</a></li>
<li><a href="#">comp2</a></li>

</ul>
</li>
<li><a href="#" >events</a></li>
<li><a href="#">competitions<span>&raquo;</span></a>
<ul class="navigation-3">
<li><a href="#">comp1</a></li>

</ul>
</li>
</ul>
</li>
<li><a href="#">biography</a>
<ul class="navigation-2">
<li><a href="#">about me</a></li>

</ul>
</li>
<li><a href="#" >contact</a>
<ul class="navigation-2">
<li><a href="#" >FAQs</a></li>
<li><a href="#" >Forum</a></li>
<li><a href="#" >Contact me</a></li>
</ul>
</li>
<li><a href="#">Links</a>
<ul class="navigation-2">
<li><a href="#">link1</a></li>

</ul>
</li>
</ul>
</li>
</ul>
</div>

<div class="gallerycontainer"> <a class="thumbnail" href="#thumb"><img src="pic/1.jpg" width="70px" height="46px" border="0" /><span><img src="pic/1.jpg" /><br />
</span></a> <a class="thumbnail" href="#thumb"><img src="pic/2.jpg" width="70px" height="46px" border="0" /><span><img src="pic/2.jpg" /><br />
</span></a> <a class="thumbnail" href="#thumb"><img src="pic/3.jpg" width="70px" height="46px" border="0" /><span><img src="pic/3.jpg" /><br />
</span></a> <br />
<a class="thumbnail" href="#thumb"><img src="pic/4.jpg" width="70px" height="46px" border="0" /><span><img src="pic/4.jpg" /><br />
</span></a> <a class="thumbnail" href="#thumb"><img src="pic/5.jpg" width="70px" height="46px" border="0" /><span><img src="pic/5.jpg" /><br />
</span></a> <a class="thumbnail" href="#thumb"><img src="pic/0.jpg" width="70px" height="46px" border="0" /><span><img src="pic/0.jpg" /><br />
</span></a> <br />
<a class="thumbnail" href="#thumb"><img src="pic/1.jpg" width="70px" height="46px" border="0" /><span><img src="pic/1.jpg" /><br />
</span></a> <a class="thumbnail" href="#thumb"><img src="pic/2.jpg" width="70px" height="46px" border="0" /><span><img src="pic/2.jpg" /><br />
</span></a> <a class="thumbnail" href="#thumb"><img src="pic/3.jpg" width="70px" height="46px" border="0" /><span><img src="pic/3.jpg" /><br />
</span></a>

</div>
</div>
</div>

<div id="rightcolumn">
<div class="innertube"></div>

</div>


<div id="footer"><a href="http://www.dynamicdrive.com/style/"></a></div>

</div>

</body>
</html>
boogyman
06-18-2008, 05:40 PM
Please review our Posting Policies and Regulations (http://dynamicdrive.com/forums/showthread.php?t=24866) especially in regards to #8 (posting computer code)
fifi
06-19-2008, 05:24 PM
sorry i'm new to this forum thing. And find it confusing :(
I had a read of the rules and I'll put this question into the dynamic drive scripts help, and put it all the code tags. hope thats the right thing to do ?
rangana
06-20-2008, 12:57 AM
You've got a lot of negative margins in placing your layouts.
Let them flow smoothly on your page. You might choose from fluid or fixed layouts, whatever you choose BonRouge (http://bonrouge.com/3c-hf-fluid-lc.php) could help you with your goal.
fifi
06-20-2008, 07:25 AM
Thank you. I had a look at BonRouge, but can't find what I need, as I want the left column to be fluid as well! :(
ddadmin
06-20-2008, 09:59 AM
Just to recap, I gather what you want is the fixed column that's in the center of the layout (one that is 190px fixed by default) to be the widest? You can easily adjust its width, but it needs to remain an explicit value (ie: 400px instead of 190px). Using the code you cut and paste, here's the result:


<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #3.6- (Fluid-Fluid-Fixed)</title>
<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}

#topsection{
background: #EAEAEA;
height: 90px; /*Height of top section*/
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
margin-left: -20%; /*Set left margin to -(RightColumnWidth)*/
}

#contentcolumn{
margin: 0 400px 0 20% /*Set margin to 0 (LeftColumnWidth) 0 (RightColumnWidth)*/
}

#leftcolumn{
float: left;
width: 400px; /*Width of left column in pixels*/
margin-left: -400px; /*Set left margin to -(LeftColumnWidth)*/
background: #C8FC98;
}

#rightcolumn{
float: left;
width: 20%; /*Width of right column in percentage*/
background: #FDE95E;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}

</style>

<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>

</head>
<body>
<div id="maincontainer">

<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.6- (Fluid-Fixed-Fluid)</h1></div></div>

<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>400px</em></b> <script type="text/javascript">filltext(20)</script></div>

</div>

<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>20%</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>

<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>

</div>
</body>
</html>

Note the "400px" values above.

p.s: I've closed your duplicate thread in the DD scripts forum (http://www.dynamicdrive.com/forums/forumdisplay.php?f=2). FYI what Rangana was talking about in terms of proper posting format was just that you should wrap any code you post here with the CODE bbcode. Other than that, questions regarding anything in the CSS Library can belong here (the CSS forum). Only questions on DD scripts (http://www.dynamicdrive.com) themselves (involving JavaScript) must be posted in the DD forums.