Floating and scrollbars

HTML & CSS
1

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

My problem is that i cant get the scrollbars to work correctly.
Hi corbosman, Welcome to SitePoint! :slight_smile:

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 -

<!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

Hi Ray, that seems to have done the trick. Many thanks!