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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    No scroll bar (div off of page)

    I have two divs stretching beyond the bottom of my visible screen but the scroll bar won't appear and I tried playing around with various "overflow" possibilities but couldn't figure it out.

    Source Code (simplified a smidgen for ease of reading purposes):
    Code:
    </style>
    <link href="css/layout2.css" rel="stylesheet" type="text/css" />
    </head>
     
    <body>
    <div id="page">
     
      <div id="masthead" onclick="location.href='index2.html';" style="cursor:pointer;"></div>
     
      <div id="navspace">
         <div id="topnav">HOME | CLUB | TEAM | CALENDAR | CONTACT</div>
      </div>
     
      <div id="main">
         <div id="mainright">SCROLL TEST</div>
         <div id="mainleft">SCROLL TEST</div>
      </div>
     
    </div>
     
    </body>
    </html>
    CSS
    Code:
    * {
    	margin: 0px;
    	padding: 0px;
    }
    #masthead  {
    	height: 130px;
    	margin-right: auto;
    	margin-left: auto;
    	background-color: #CB6528;
    	margin-top: 0px;
    	background-image: url(../Images/Masthead_SuperDroughtOutline.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	width: 1000px;
    }
    #page {
    	background-color: #CF0;
    	background-image: url(../Images/mhflank.jpg);
    	background-repeat: repeat-x;
    	height: 131px;
    	width: 100%;
    	margin-right: auto;
    	margin-left: auto;
    	position: fixed;
    	background-position: center;
    	visibility: visible;
    }
    #page #navspace {
    	height: 12px;
    	padding-top: 5px;
    	padding-bottom: 12px;
    	margin-right: auto;
    	margin-left: auto;
    	width: 1000px;
    }
    #page #topnav {
    	padding-top: 3px;
    	padding-bottom: 3px;
    }
    #main {
    	width: 1000px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #main #mainright {
    	background-color: #E48631;
    	height: 700px;
    	width: 500px;
    	float: right;
    }
    #main #mainleft {
    	background-color: #EEE;
    	height: 700px;
    	width: 500px;
    	float: left;
    }
    Link to website: http://test.texasrockclimbing.org

    How do I get the website to recognize that the grey and orange divs are stretching beyond the limits of the visible area?

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    you have to clear your floats



    whenever you float something, it needs either :

    a) needs a height for the parent div (#main)

    Code:
    #main {
     height: 900px;
    }
    b) clear from the bottom

    Code:
    <div id="main">
     <div class="left"></div>
     <div class="right"></div>
     <div style="clear:both;"></div>
    </div>
    c) clearfix (clearing before)

    Code:
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    Code:
    <div id="main" class="clearfix">
     <div class="left"></div>
     <div class="right"></div>
    </div>
    now that you have a height set, you can use overflow: auto; on the #main
    Last edited by Sammy12; 07-19-2011 at 07:01 AM.

  • Users who have thanked Sammy12 for this post:

    pulse1212 (07-19-2011)

  • #3
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Ah! Trying that out as we speak!
    Last edited by pulse1212; 07-19-2011 at 06:58 AM. Reason: Hadn't read previous reply fully

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    you can't. the best way to put two divs next to each other is using float

    -----

    all those options are valid. there are many ways to clear floats. option (a) is the best way, option (b) is when a height varies (possible for comments and columns that increase size because of user-inputs), option (c) is for a lazy web developer or someone who wants to be extremely cautious about clearing.

    apprently clearfix is better than clearing from the bottom browser-support wise, but I have seen no difference between browsers
    Last edited by Sammy12; 07-19-2011 at 07:04 AM.

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Okay, so I tried only setting #main height to 900px but it didn't work so I went ahead and also implemented
    Code:
    <div style="clear:both;"></div>
    but it no scroll bar appeared. I ended up trying all combinations of your suggested solution but none worked

    you can refer to the life website in case your wondering if I added the code incorrectly or if I misunderstood
    Last edited by pulse1212; 07-19-2011 at 07:11 AM. Reason: 700 to 900px

  • #6
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    take the fixed out from id="page". you only need one clear method. its not causing the page from not scrolling, but it is the correct way to clear floats regardless.

    also take out the heights from <body> and id="page"

  • Users who have thanked Sammy12 for this post:

    pulse1212 (07-19-2011)

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    omg >_< Lifesaver! ha! I could have swornnn I had tried that!

    Thank you so much Sammy

    Now time to get those two divs side by side again

    EDIT: DONE! *SUPER* sigh of relief. Again, I really appreciate your help
    Last edited by pulse1212; 07-19-2011 at 07:22 AM. Reason: UPDATE


  •  

    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
    •