Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    68
    Thanks
    1
    Thanked 1 Time in 1 Post

    3 column layout problem

    Hey, I'm having a little CSS issue and I was wondering if you could help me out.

    This is my html page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <!--[if IE]>
       <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]-->
    <body>
    
    <div id="wrap">
       <div id="topnav"></div>
       <div id="header"></div>
    
       <div id="nav">
          <ul>
             <li><a href="index.php">Home</a></li>
          </ul>
       </div>
    
       <div id="sidebar">
          <h3>Sidebar</h3>
       </div>
       
       <div id="rightcol">
          <h3>Rightcol</h3>
       </div>
       
       <div id="content">
       </div>
    </div>
    </body>
    </html>
    In styles.css I have this:
    Code:
    body {
       background: #f0f0f0;
       margin: auto;
       height: 100%;
       font-family: tahoma;
       color: #424242;
       font-size: 12px;
    }
    a {
       color: #424242;
       font-size: 12px;
       text-decoration: none;
    }
    a:hover {
       color: #424242;
       border-bottom: 1px dotted #424242;
    }
    h3 {
       font-size: 16px;
       font-weight: bold;
       color: #424242;
       margin-bottom: 2px;
    }
    #wrap {
       background: url('../images/wrap.png') repeat-y;
       width: 928px;
       height: auto !important;
       display: block;
       margin-left: auto;
       margin-right: auto;
       bottom: 0;
    }
    #topnav {
       height: 20px;
       background: url('../images/topnav.png') repeat-x;
       width: 900px;
       margin-left: 14px;
       border-bottom: 1px dashed #d6d6d6;
    }
    #header {
       background: url('../images/header.png');
       width: 348px;
       height: 47px;
       margin-top: 20px;
       margin-left: 20px;
    }
    #nav {
       background: url('../images/nav.png');
       width: 900px;
       height: 35px;
       margin-top: 20px;
       margin-left: 14px;
    }
    #nav ul { 
       float: left;
       list-style: none; 
       margin:0; padding: 0 0 0 10px; 
       margin-top: 10px;
    } 
    #nav ul li { 
       display: inline;
    } 
    #nav ul li a { 
       display: block; 
       float: left; 
       padding: 0 5px; 
       color: #ffffff;
       text-decoration: none; 
       font-weight: bold;
       font-size: 12px;
    } 
    #nav ul li a:hover { 
       color: #af1a2c;
       border-bottom: 0px !important;
    } 
    #sidebar {
       float: left;
       width: 170px;
       margin-top: 2px;
       margin-left: 20px;
       margin-bottom: 20px;
    }
    #sidebar a {
       font-size: 14px;
    }
    #sidebar a:hover {
       font-size: 14px;
    }
    #content {
       float: left;
       width: 510px;
       margin-bottom: 20px;
       margin-left: 5px;
    }
    #rightcol {
       float: right;
       width: 180px;
       margin-top: 2px;
       margin-right: -230px;
       margin-bottom: 20px;
    }
    Now, the code above works in firefox however in internet explorer it didn't so I used a seperate stylesheet for ie.

    In ie.css I have:
    Code:
    h3 {
       margin-top: 10px;
       margin-bottom: 2px;
    }
    #sidebar {
       float: left;
       width: 160px;
    }
    #content {
       float: left;
       margin-top: 0px;
       width: 525px;
    }
    #rightcol {
       margin-left: 45px;
       width: 180px;
    }
    The problem I am having is I would like the div's to be able to move when content is added to it but the content div drops below the right div like this:
    Code:
    http://imagesocket.com/view/ie820.png
    This only happens in internet explorer, it works in firefox, it should be like this:
    Code:
    http://imagesocket.com/view/firfox6e1.png
    Could anyone help me out with this please?
    Thanks,

  • #2
    New Coder
    Join Date
    Jun 2010
    Posts
    16
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I do not experience the same issue you are reporting in IE8? Were you testing in an old version or something?


  •  

    Posting Permissions

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