three column layout #3.6- (fluid-fixed-fluid)

**fifi** · 06-20-2008, 07:29 AM

1) Script Title:
CSS Liquid Layout #3.6- (Fluid-Fixed-Fluid
2) Script URL (on DD): http://www.dynamicdrive.com/style/la...d-fixed-fluid/

3) Describe problem:

This layout is perfect for what i want to achieve but I needed to make the middle content column much larger.
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 my code

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" 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>

Hope someone can help? and i have put this question in the correct thread

**ddadmin** · 06-20-2008, 09:56 AM

Original thread here: http://www.dynamicdrive.com/forums/s...ad.php?t=33506

Thread: three column layout #3.6- (fluid-fixed-fluid)

Thread Tools

Search Thread

three column layout #3.6- (fluid-fixed-fluid)

Bookmarks

Bookmarks

Posting Permissions