1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

divs problem

Discussion in 'CSS' started by gastongr, Aug 11, 2006.

  1. #1
    Hello,
    i'm trying to make a css layout but i have a problem that i can't fix :( .
    The div cointaining the lateral menu in my layout is not pushing the div of the footer, instead it's displayed over it.
    like this:
    [​IMG]
    Can someone help me solve this? :)
    Thanks in advance.
    Gaston
     
    gastongr, Aug 11, 2006 IP
  2. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Can you post the html and css so I can see what the problem is?
     
    math20, Aug 11, 2006 IP
  3. gastongr

    gastongr Well-Known Member

    Messages:
    421
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    108
    #3
    Yes, here is it.
    Thanks
    <!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"><head><title>CodingFAQ</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    	<style media="all">
    body, td {
       font-family: "Bitstream Vera Sans", "Trebuchet MS", Geneva, Verdana, Arial, Helvetica, sans-serif;
       font-size: 80.01%;
    }
    body, h1, h2, h3, h4, h5, h6, div, p, table, td, ul, ol, li, dd, dt, dl, blockquote, address, hr, pre {
       margin: 0;
       padding: 0;
    }
    a {
       text-decoration: none;
    }
    a:hover {
       text-decoration: underline;
       }
    a:visited {
       text-decoration: none;
       }
    form {
       margin: 0;
       padding: 0;
    }
    fieldset {
       margin-bottom: 1em;
       padding: .5em;
    }
    img {
       border: 0;
    }
    hr {
       height: 1px;
       border: 1px solid gray;
    }
    p {
       padding: 0;
       margin: 0;
       margin-bottom: 0.8em;
    }
    h1 {
       font-size: 200%;
    }
    h2 {
       font-size: 175%;
    }
    h3 {
       font-size: 125%;
    }
    /**
    * Main wrapper around the div containers
    */
    #wrapper1 {
       min-width: 731px;
       background: #eee url(menu.jpg) top left repeat-y;
    }
    #wrapper1, #wrapper2 {
       margin: 0px;
       padding: 0px;
    }
    #topBar {
      height: 84px;
      background-color: #E0E8F0;
    }
    #logo {
      width: 239px;
      height: 84px;
      background-color: #E0E8F0;
      float: left;
    }
    #banner {
      height: 60px;
      width: 468x;
      background-color: #E0E8F0;
      float: right;
      padding: 11px;
    }
    #navBar {
      height: 29px;
      background-color: #B0C4DE;
      text-align: right;
      border-bottom: 1px dashed;
      border-top: 1px dashed;
    }
    #footer {
      height: 20px;
      background-color: #B0C4DE;
      border-top: 1px dashed;
      text-align: center;
      padding: 10px;
    }
    #sideBar {
      width: 200px;
      background-color: #F2F4F7;
      float: left;
      font-size: 100%;
      }
    #contentArea {
      margin-left: 201px;
      background-color: #ffffff;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 15px;
      padding-bottom: 10px;
    }
    /**
    * Categories
    */
    #categories {
       width: 200px;
       padding: 0;
       font-size: 100%;
       border: 0px;
       background-color: #F2F4F7;
    }
    #categories ul {
       list-style: none;
       margin: 0;
       padding: 0;
       border: none;
    }
    #categories li {
       margin: 0;
       border-color: #B0C4DE;
    }
    #categories li a {
       display: block;
       padding: 5px 5px 5px 0.5em;
       border-bottom: 1px dashed;
       text-decoration: none;
       border-color: #000000;
       background-color: #F2F4F7;
       color: #000000;
       height: 100%; /* stupid IE fix */
    }
    html>body #categories li a {
       width: auto;
    }
    #categories li ul li {
       margin: 0;
       border-left: 0px
    }
    #categories li ul a {
       padding-left: 15px;
    }
    #categories ul ul ul a {
       padding-left: 25px;
    }
    #categories ul ul ul ul a {
       padding-left: 35px;
    }
    #categories .active {
    }
    #categories .subcat a {
    }
    #categories .subcat .active {
    }
    #categories li a:hover {
        background-color: #E0E8F0;
        color: #000000;
    }
    
    #categories .active {
    	background-color: #E0E8F0;
    }
    #categories .subcat a {
    	background-color: #F2ECEC;
    }
    #categories .subcat .active {
    	background-color: #ECF2ED;
    } 
    
    #navlinks {
       margin: 0px;
       padding-top: 5px;
    }
    #navlinks ul {
       margin: 0px;
       padding: 0px;
       border: none;
       list-style: none;
    }
    #navlinks li {
       display: inline;
    }
    #navlinks ul a {
       font-size: 100%;
       border-left: 1px dashed;
       text-decoration: none;
       border-color: #000000;
       background-color: #B0C4DE;
       color: #000000;
       padding-top: 5px;
       padding-bottom: 6px;
       padding-left: 6px;
       padding-right: 6px;
       height: 100%;
    }
    #navlinks ul a:hover {
       background-color: #E0E8F0;
    }
    	</style></head><body>
    <div id="wrapper1">
        <div id="wrapper2">
    <div id="topBar">
    <div id="logo">
    <img src="logo.jpg" alt"" />
    </div>
    <div id="banner">
    <img src="banner_cf.gif" alt"" />
    </div>
    </div>
    <div id="navBar">
    <div id="navlinks"><ul><li><a href="http://www.webmastershelp.com">Advanced Search</a></li><li><a href="http://www.webmastershelp.com">Submit Question</a></li><li><a href="http://www.webmastershelp.com">Add Content</a></li><li><a href="http://www.webmastershelp.com">Open Questions</a></li><li><a href="http://www.webmastershelp.com">Contact</a></li></ul></div>
    </div>
    <div id="sideBar">
    <div id="categories">
    <ul>
    <li class="home"><a href="http://www.webmastershelp.com">ASP & .NET</a></li>
    <li><a href="http://www.webmastershelp.com">PHP</a></li>
    <li><a href="http://www.webmastershelp.com">HTML, CSS & Javascript</a></li>
    </ul>
    </div>
    </div>
    
    <div id="contentArea"><h2>CodingFAQ.com</h2><hr><br />
    Hello all,
    
    I cant figure out why but on this page http://www.jobsinswindon.com/applywi...ture-rss-feeds ie one of the blog posts the left menu column drops below the main content.
    <br />
    The wierd thing is the blog homepage is fine so i dont understand.
    <br />
    All is fine in FF.
    <br />
    please help as i have no idea why
    <br />
    Thanks<br /><br />
    Yeah, I know. However, I've been changing they way I code CSS recently and made a habit of separating all my patches/hacks from the rest of the pages (putting them in separate files) so I know where they are in the future.
    <br />
    I find it's much tidier to code like that and lets others know that you're targetting a specific bug, helping them to learn quicker, rather than forgetting if it remains thrown in with the rest of the properties.
    </div>
    <div id="footer">
    © 2006 CodingFAQ.com. All rights reserved.
    </div>
    </div>
    </div>
    </body></html>
    HTML:
     
    gastongr, Aug 11, 2006 IP
  4. gastongr

    gastongr Well-Known Member

    Messages:
    421
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    108
    #4
    gastongr, Aug 11, 2006 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    kk5st, Aug 11, 2006 IP
  6. gastongr

    gastongr Well-Known Member

    Messages:
    421
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    108
    #6
    Thanks for your help but i don't fully understand the pointed article.
    How do i enclose my float elements?
    I tryed using position: absolute; left: 0; istead of float: left; for the lateral menu but the problem is not solved.
     
    gastongr, Aug 11, 2006 IP
  7. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Can you post the code without the numbers(by quoting)? I'm having trouble copying.
     
    math20, Aug 11, 2006 IP
  8. gastongr

    gastongr Well-Known Member

    Messages:
    421
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    108
    #8
    sure here it's
     
    gastongr, Aug 11, 2006 IP
  9. gastongr

    gastongr Well-Known Member

    Messages:
    421
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    108
    #9
    Sorry for all the extra code :S.
    To see the problem remove the content of the main div, the one with id="contentArea"
     
    gastongr, Aug 11, 2006 IP
  10. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #10
    fixed it, you just needed to delete position:absolute from the sidebar. Feel free to give me rep :)

     
    math20, Aug 11, 2006 IP
    gastongr likes this.
  11. gastongr

    gastongr Well-Known Member

    Messages:
    421
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    108
    #11
    Thanks man,
    i'll see how it goes.
     
    gastongr, Aug 11, 2006 IP
  12. gastongr

    gastongr Well-Known Member

    Messages:
    421
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    108
    #12
    Still not working
    Have you tested it?. :)
    i tryed with IE and firefox, in both of them the lateral menu is over the footer.
    Thanks for your time
     
    gastongr, Aug 11, 2006 IP
  13. gastongr

    gastongr Well-Known Member

    Messages:
    421
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    108
    #13
    gastongr, Aug 11, 2006 IP
  14. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #14
    It is pushed over, but the padding/margins are 0.
     
    math20, Aug 11, 2006 IP
  15. gastongr

    gastongr Well-Known Member

    Messages:
    421
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    108
    #15
    gastongr, Aug 11, 2006 IP
  16. math20

    math20 Peon

    Messages:
    1,562
    Likes Received:
    33
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Ohh, now I understand. Just a minute

    actually, tomorrow. I need to get some sleep!
     
    math20, Aug 11, 2006 IP
  17. gastongr

    gastongr Well-Known Member

    Messages:
    421
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    108
    #17
    I got it, adding clear:both; to the footer seems to have solved it :).
    I'll soon post the final code for you to see :D
    Thanks so much for your help
     
    gastongr, Aug 11, 2006 IP
  18. briansol

    briansol Well-Known Member

    Messages:
    221
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    110
    #18
    yes, you ALWAYS need to clear floats, as a float is taken 'out' of the rendered page area.
     
    briansol, Aug 12, 2006 IP