Results 1 to 2 of 2

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

  1. #1
    Join Date
    Jun 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,890
    Thanks
    3
    Thanked 964 Times in 953 Posts
    Blog Entries
    15

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •