Question

I recently made a website where I needed 6 columns with the y overflow visible. I couldn’t make a clean 6 divisions. The width needed to be wider to adjust for the 6 scrollbars and a bit of padding.

Is there a better way than my attempt?

<div class="col">

  <div class="section">
    Content that overflows this section. 

  </div>

</div>

    .col {

    width: 15.2%;
    padding-right: 15px;
    float: left;
}

.section {
    overflow-y: scroll;
    width: 100%;


}

It’s very sloppy and the columns don’t reach the far right edge.

I don’t know jquery well enough to attempt but will like take any advice.

****** I worked it out, so silly. You need to use % for everything including padding. Duh ******* Sorry for wasting anyones time!

Answer 1

I would say that it is better to set padding for the inner div .section, so there will be no need to adjust .col width.

Try this HTML code:

<div id="grid">
    <div class="col">
      <div class="section">
        Content that overflows this section. 
      </div>
    </div>
    <div class="col">
      <div class="section">
        Content that overflows this section. 
      </div>
    </div>
    <div class="col">
      <div class="section">
        Content that overflows this section. 
      </div>
    </div>
    <div class="col">
      <div class="section">
        Content that overflows this section. 
      </div>
    </div>
    <div class="col">
      <div class="section">
        Content that overflows this section. 
      </div>
    </div>
    <div class="col">
      <div class="section">
        Content that overflows this section. 
      </div>
    </div>
</div>

With this CSS:

#grid {
    margin-left: -15px;
}

.col {
    width: 16.6%;
    float: left;
}

.section {
    overflow-y: scroll;
    margin-left: 15px;
    height: 100px;
    background: green;
}​

Please note that #grid { margin-left: -15px; } will help you get rid of unnecessary white space before first column

take a look at Live demo