Results 1 to 8 of 8

Thread: Three column layout not working in IE?

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

    Default Three column layout not working in IE?

    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.

    Code:
    #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...
    Last edited by ddadmin; 06-19-2008 at 06:29 PM.

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    We need to see the markups (HTML) as well.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

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

    Default

    Do you mean all the code. In as all the html and css?
    I've pasted it below...

    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>
    Last edited by ddadmin; 06-19-2008 at 06:29 PM.

  4. #4
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Please review our Posting Policies and Regulations especially in regards to #8 (posting computer code)

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

    Default

    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 ?

  6. #6
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    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 could help you with your goal.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

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

    Default

    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!

  8. #8
    Join Date
    Aug 2004
    Posts
    9,894
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    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:

    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>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. 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 themselves (involving JavaScript) must be posted in the DD forums.

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
  •