CODEWITHSUNDEEP
css
user2996215
user2996215

Reputation: 31

print data in 3 columns with css

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

Upvotes: 2

Views: 604

Answers (2)

Boris
Boris

Reputation: 586

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)

Upvotes: 2

Malcolm Crum
Malcolm Crum

Reputation: 4879

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/

Upvotes: 0

Related Questions