SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    floating and scrollbars

    Hi all, im having some difficulty getting a specific page layout to work. Ive made a basic version of it here: http://wa.ter.net/test.html (css at test.css)

    The red area contains left floated lists. My problem is that i cant get the scrollbars to work correctly. In the CSS as is, i dont see both the vertical and horizontal scrollbar at the same time. I have to scroll down to reach the horizontal scrollbar. Is it possible to modify the css to be able to see both scrollbars at the same time if the height and width of the page are smaller than the red area? Ive tried all kinds of permutations, but no matter what I do something isnt working. For instance, I can get the scrollbars to work right, but then the navbar (green) suddenly isnt always covering the whole top.

    I'll also be interested in completely different solutions to reach the same visual. I need to create vertical columns of X items. It's not tabular data.

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    My problem is that i cant get the scrollbars to work correctly.
    Hi corbosman, Welcome to SitePoint!

    It looks like you can do away with that #contentcontainer and set the overflow:auto on your #content div.

    You can also do away with that clearing div since overflow:auto is a float containment mechanism.

    See if this gets what you are after -

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
    <style type="text/css">
    body {
      margin: 0;
      padding: 0;
    }
    #wrap {
      background: yellow;
      width:100%;
      min-width:1000px;
    }
    #nav {
      height: 30px;
      background: green;
    }
    #content {
      background: red;
      width: 1000px;
      overflow: auto;
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      background: #CCC;
      text-align: center;
      width: 40px;
      margin: 20px;
      float: left;
      display:inline;/*IE6*/
    }
     
    li {
      float:left;/*IE*/
      width:38px;/*40px with borders*/
      height: 30px;
      border: 1px solid #000;
    }
     
    #footer {
      clear: both;
    }
    </style>
    </head>
    <body>
      <div id="wrap">
        <div id="nav"></div>
     
          <div id="content">
            <ul class="row">
            <li class="rack">1</li>
            <li class="rack">2</li>
            <li class="rack">3</li>
            <li class="rack">4</li>
            <li class="rack">5</li>
            <li class="rack">6</li>
            <li class="rack">7</li>
            <li class="rack">8</li>
            <li class="rack">9</li>
            <li class="rack">10</li>
            <li class="rack">11</li>
            <li class="rack">12</li>
            <li class="rack">13</li>
            <li class="rack">14</li>
            <li class="rack">15</li>
            <li class="rack">16</li>
            <li class="rack">17</li>
            </ul>
            <ul class="row">
            <li class="rack">1</li>
            <li class="rack">2</li>
            <li class="rack">3</li>
            <li class="rack">4</li>
            <li class="rack">5</li>
            <li class="rack">6</li>
            <li class="rack">7</li>
            <li class="rack">8</li>
            <li class="rack">9</li>
            <li class="rack">10</li>
            <li class="rack">11</li>
            <li class="rack">12</li>
            <li class="rack">13</li>
            <li class="rack">14</li>
            <li class="rack">15</li>
            <li class="rack">16</li>
            <li class="rack">17</li>
            </ul>
            <ul class="row">
            <li class="rack">1</li>
            <li class="rack">2</li>
            <li class="rack">3</li>
            <li class="rack">4</li>
            <li class="rack">5</li>
            <li class="rack">6</li>
            <li class="rack">7</li>
            <li class="rack">8</li>
            <li class="rack">9</li>
            <li class="rack">10</li>
            <li class="rack">11</li>
            <li class="rack">12</li>
            <li class="rack">13</li>
            <li class="rack">14</li>
            <li class="rack">15</li>
            <li class="rack">16</li>
            <li class="rack">17</li>
            </ul>
            <ul class="row">
            <li class="rack">1</li>
            <li class="rack">2</li>
            <li class="rack">3</li>
            <li class="rack">4</li>
            <li class="rack">5</li>
            <li class="rack">6</li>
            <li class="rack">7</li>
            <li class="rack">8</li>
            <li class="rack">9</li>
            <li class="rack">10</li>
            <li class="rack">11</li>
            <li class="rack">12</li>
            <li class="rack">13</li>
            <li class="rack">14</li>
            <li class="rack">15</li>
            <li class="rack">16</li>
            <li class="rack">17</li>
            </ul>
            <ul class="row">
            <li class="rack">1</li>
            <li class="rack">2</li>
            <li class="rack">3</li>
            <li class="rack">4</li>
            <li class="rack">5</li>
            <li class="rack">6</li>
            <li class="rack">7</li>
            <li class="rack">8</li>
            <li class="rack">9</li>
            <li class="rack">10</li>
            <li class="rack">11</li>
            <li class="rack">12</li>
            <li class="rack">13</li>
            <li class="rack">14</li>
            <li class="rack">15</li>
            <li class="rack">16</li>
            <li class="rack">17</li>
            </ul>
            <ul class="row">
            <li class="rack">1</li>
            <li class="rack">2</li>
            <li class="rack">3</li>
            <li class="rack">4</li>
            <li class="rack">5</li>
            <li class="rack">6</li>
            <li class="rack">7</li>
            <li class="rack">8</li>
            <li class="rack">9</li>
            <li class="rack">10</li>
            <li class="rack">11</li>
            <li class="rack">12</li>
            <li class="rack">13</li>
            <li class="rack">14</li>
            <li class="rack">15</li>
            <li class="rack">16</li>
            <li class="rack">17</li>
            </ul>
            <ul class="row">
            <li class="rack">1</li>
            <li class="rack">2</li>
            <li class="rack">3</li>
            <li class="rack">4</li>
            <li class="rack">5</li>
            <li class="rack">6</li>
            <li class="rack">7</li>
            <li class="rack">8</li>
            <li class="rack">9</li>
            <li class="rack">10</li>
            <li class="rack">11</li>
            <li class="rack">12</li>
            <li class="rack">13</li>
            <li class="rack">14</li>
            <li class="rack">15</li>
            <li class="rack">16</li>
            <li class="rack">17</li>
            </ul>
            <ul class="row">
            <li class="rack">1</li>
            <li class="rack">2</li>
            <li class="rack">3</li>
            <li class="rack">4</li>
            <li class="rack">5</li>
            <li class="rack">6</li>
            <li class="rack">7</li>
            <li class="rack">8</li>
            <li class="rack">9</li>
            <li class="rack">10</li>
            <li class="rack">11</li>
            <li class="rack">12</li>
            <li class="rack">13</li>
            <li class="rack">14</li>
            <li class="rack">15</li>
            <li class="rack">16</li>
            <li class="rack">17</li>
            </ul>
            <ul class="row">
            <li class="rack">1</li>
            <li class="rack">2</li>
            <li class="rack">3</li>
            <li class="rack">4</li>
            <li class="rack">5</li>
            <li class="rack">6</li>
            <li class="rack">7</li>
            <li class="rack">8</li>
            <li class="rack">9</li>
            <li class="rack">10</li>
            <li class="rack">11</li>
            <li class="rack">12</li>
            <li class="rack">13</li>
            <li class="rack">14</li>
            <li class="rack">15</li>
            <li class="rack">16</li>
            <li class="rack">17</li>
            </ul>
            <ul class="row">
            <li class="rack">1</li>
            <li class="rack">2</li>
            <li class="rack">3</li>
            <li class="rack">4</li>
            <li class="rack">5</li>
            <li class="rack">6</li>
            <li class="rack">7</li>
            <li class="rack">8</li>
            <li class="rack">9</li>
            <li class="rack">10</li>
            <li class="rack">11</li>
            <li class="rack">12</li>
            <li class="rack">13</li>
            <li class="rack">14</li>
            <li class="rack">15</li>
            <li class="rack">16</li>
            <li class="rack">17</li>
            </ul>
            <ul class="row">
            <li class="rack">1</li>
            <li class="rack">2</li>
            <li class="rack">3</li>
            <li class="rack">4</li>
            <li class="rack">5</li>
            <li class="rack">6</li>
            <li class="rack">7</li>
            <li class="rack">8</li>
            <li class="rack">9</li>
            <li class="rack">10</li>
            <li class="rack">11</li>
            <li class="rack">12</li>
            <li class="rack">13</li>
            <li class="rack">14</li>
            <li class="rack">15</li>
            <li class="rack">16</li>
            <li class="rack">17</li>
            </ul>     
          </div>
        <div id="footer"></div>
      </div>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ray, that seems to have done the trick. Many thanks!


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
  •