2

I want to print my data in 3 columns. But the data is not arranged correctly in the columns. I have limited knowledge on CSS. Please advice where I did it wrong?

I need to print a horizontal line in the third column afer 6 and 8.

<html>
<head>
<style>
.container{
    width: 596px;
    float:left;
    posy
}
.container .line {
    border-bottom: 1px dotted #999;
    border-top-style: none;
    margin: 7px 0;
    padding: 3px 0 0;
}
.col1{

    width: 186px;
    right-padding:19px;
    float:left;
}
.col2{

    left: 205px;
    right-padding:19px
    width: 186px;
    float:left;
}
.col3{

    left: 410px;
    width: 186px;
    float:right;
    right:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="col1">
<ul>
<li>Test Area 1</li>
<li>Test Area 2</li>
<li>Test Area 3</li>
<li>Test Area 4</li>
</ul>
</div>
<div class="col2">
<ul>
<li>Test Area 5</li>
</ul>
</div>
<div class="col3">
<ul>
<li> Test 6</li>
</ul>
</div>
<div class="line"></div>
<div class="col3">
<ul>
<li>Test Area 7</li>
</ul>
</div>
<div class="col3">
<ul>
<li>Test Area 8</li>
</ul>
</div>
<div class="line"></div>
<div class="col3">
<ul>
<li>Test Area 9</li>
</ul>
</div>
<div class="col3">
<ul>
<li>Test Area 10</li>
</ul>
<div class="col3">
<ul>
<li>Test Area 16</li>
<li>Test Area 17</li>
<li>Test Area 18</li>
<li>Test Area 19</li>
<li>Test Area 20</li>
</ul>
</div>
</div>
<div class="col1">
<ul>
<li>Test Area 11</li>
<li>Test Area 12</li>
<li>Test Area 13</li>
<li>Test Area 14</li>
</ul>
</div>
<div class="col2">
<ul>
<li>Test Area 15</li>
</ul>
</div>
</div>
</html>

This is what I get. enter image description here

user2996215
  • 31
  • 3
  • Your example has a few issues with invalid syntax. Your HTML is missing a closing body tag, and you have CSS elements that don't exist. E.g. `right-padding` should be `padding-right` etc. – j08691 Jul 05 '15 at 16:21

2 Answers2

2

This question is similar to the one here: how to split the ng-repeat data with three columns using bootstrap
And here: 3 column layout HTML/CSS

There are several solutions. You could also use this css: 

li:nth-child(3)
Community
  • 1
  • 1
Boris
  • 566
  • 5
  • 21
0

Is there a reason you have multiple col1 divs, multiple col2 divs, etc? I think your code would be better laid out with just one of each. It will make layout much clearer.

For example:

<div class="container">
<div class="col1">
    <ul>
      <li>Test Area 1</li>
      <li>Test Area 2</li>
      <li>Test Area 3</li>
      <li>Test Area 4</li>
    </ul>
    <ul>
      <li>Test Area 11</li>
      <li>Test Area 12</li>
      <li>Test Area 13</li>
      <li>Test Area 14</li>
    </ul>
  </div>
  <div class="col2">
    <ul>
      <li>Test Area 5</li>
    </ul>
    <ul>
      <li>Test Area 15</li>
    </ul>
  </div>
  <div class="col3">
    <ul>
      <li> Test 6</li>
    </ul>
    <div class="line"></div>
    <ul>
      <li>Test Area 7</li>
    </ul>
    <ul>
      <li>Test Area 8</li>
    </ul>
    <div class="line"></div>
    <ul>
      <li>Test Area 9</li>
    </ul>
    <ul>
      <li>Test Area 10</li>
    </ul>
    <ul>
      <li>Test Area 16</li>
      <li>Test Area 17</li>
      <li>Test Area 18</li>
      <li>Test Area 19</li>
      <li>Test Area 20</li>
    </ul>
  </div>
</div>

I've made some additional changes with a demo here: http://jsfiddle.net/nsqeLha4/

Malcolm Crum
  • 4,345
  • 4
  • 30
  • 49