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 to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS 3 Column Layout issue

    Hello, I am hoping someone on these forums can help me. I am new to writing CSS.

    I've got a 3 column layout that I created and it looks correct until I zoom out a few clicks in Firefox, then the #rightnav column drops out of place and falls down below the #leftnav.

    Note: I tried zooming out like this in IE & Opera and everything stays correct no matter how much I zoom. So it's just Firefox that's messing up but I want to fix.

    Here's the CSS:

    Code:
    #container {
     width: 960px;
     margin-left: auto;
     margin-right: auto;
    }
    
    #header {
    height:100px;
    background-color:#CC9966;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    }
    
    h1 {
    color:black;
    text-indent:15px;
    }
    
    #menu {
    background-color: #8B4513;
    height: 30px;
    width: 100%;
    }
    
    #menu ul {
      margin-left: -2.5em;
    }
    
    #menu li {
    list-style-type: none;
    float:left;
    width: 200px;
    height: 30px;
    }
    
    #menu a {
    display: block;
    font-weight:bold;
    color:#CC9966;
    background-color:#8B4513;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    padding-top: 5px;
    }
    
    #menu a:hover {
     background-color: black;
    height: 30px;
    }
    
    #leftnav {
    float:left;
    width: 130px;
    height:800px;
    background-color: #CC9966;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    border-top: none;
    border-bottom:none;
    text-align: center;
    padding: 15px;
    }
    
    #rightnav  {
    float: left;
    width: 130px;
    height:800px;
    background-color: #CC9966;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    border-top:none;
    border-bottom:none;
    text-align: center;
    padding: 15px;
    
    }
    
    #body   {
    float:left;
    width: 605px;
    height:800px;
    text-align:center;
    color: black;
    background-color: #EDC393;
    padding:15px;
    
    }
    
    
    #footer   {
    clear:both;
    text-align:center;
    background-color: #CC9966;
    border-style: solid;
    border-width: 1px;
    }
    And the XHTML:
    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">
    
    <head>
    <title>CSS Experiment Website - Total Awesomeness yea</title>
    <meta http-equiv="Content-Type" content="text/html;
        charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" media="screen" />
    </head>
    <body>
    <div id="container">
    <div id="header"><h1>First Experiment Website Made From Scratch. </h1> 
       <div id= "menu">
        <ul>
         <li><a href="">Home</a></li>
         <li><a href="">News</a></li>
         <li><a href="">About</a></li>
         <li><a href="">Contact</a></li>
       </ul>
      </div>
    </div>
    
    <div id="leftnav"> This is the left nav</div>
    
    <div id="body"> First Experiment Website Made From Scratch. Yes, I wrote the code. <p> I've got a lovely bunch of coconuts, deedlee. There they are a standing in a row. Bumpa bumpa bumpa bumpa...big ones, small ones, some as big as your head.   Since you took the time to come look at this site, Please fill out the questionaire below: </p>  
    
         <h2>Website Survey / Feedback</h2>
         <form action = "">
         <fieldset>
         <legend>Tell Us What You Think</legend>
    <p>
         <label>Name</label>
         <input type= "text" 
         id = "txtname" />
    </p>
    <p>    
          <label>E-mail Address</label>
          <input type= "text"
           id = "txtemail" />
    </p>
      
    <p> 
          <label>Why Did You Visit this Website?</label>
          <select id = "reason">
             <option value = "like">I really like it</option>
             <option value = "referred">Someone told me to</option>
          </select>
    </p>
    <p>   
           <label> Questions or Comments? Let us know:</label>
    </p>
    <p>
           <textarea id = "txtAnswer"
                        rows = "10"
                        cols = "40"></textarea>
    </p>
    <p>     <input type = "submit"
                value = "Submit" /> </p>
    </fieldset>
    </form> To prove the validation of this website,  just <a href = "http://validator.w3.org">Click Here </a>
    </div>
    <div id="rightnav"> To prove the validation of this website, <a href = "http://validator.w3.org">Click Here </a>This is the right nav.</div>
    <div id="footer"> Copyright 2011 Janette Jafary</div>
    
    </div>
    
    </body>
    </html>
    What can I do? Help is much appreciated, thank you!!!

    PS. I tried changing the #rightnav to float right instead of float left, but that just created an unwanted space between columns and I still had the zoom problem.
    Last edited by jweb; 09-17-2011 at 06:09 PM.

  • #2
    New to the CF scene
    Join Date
    Sep 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    someone...anyone?

    Somebody please?


  •  

    Tags for this Thread

    Posting Permissions

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