0

I have the following CSS and HTML codes to maintain the same width 3 columns. css file is

* {
  box-sizing: border-box;
}
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  height: 100px;
}

.column2 {
  float: left;
  width: 33.33%;
  padding: auto;
  height: 800px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

html file is,

<h2>Three Equal Columns</h2>

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div>

now I need keep all column tag data in same potisions. how could I do this using my css file? edit screen shot ![some screen shot ]1

sign458
  • 55
  • 8
  • IDK I did not understand what you want to do exactly! – duhok Apr 09 '20 at 04:29
  • okay simply this is I need keep all

    tag data in same positions in the columns. as an example if more content include in

    tag then other columns

    tag data position may change (not in same line to other column position )

     – sign458 Apr 09 '20 at 04:34
  • Can you make and example for me and screenshot it? I did not understand clearly! – duhok Apr 09 '20 at 04:46
  • I have added some screenshot now you can see – sign458 Apr 09 '20 at 04:53

1 Answers1

-1

I'm not sure if I understand the question. If you want the column items to be next to each other instead of in the same horizontal line, why do you use "row" divs? The example in the screenshot is using just 3 column divs.

* {
  box-sizing: border-box;
}
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
}

.column2 {
  float: left;
  width: 33.33%;
  padding: auto;
  height: 800px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
<h2>Three Equal Columns</h2>


  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>

    <h2>Title</h2>
    <p>Some text.. </p>

   <h2>Title longer</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus feugiat porta. Curabitur dui est, bibendum in nisl quis, tempor dictum nisi. Nam vel aliquam ligula. In eget nunc odio. Aenean ornare elit sed augue sodales consectetur. Nam sagittis leo nunc, sit amet consectetur lorem dignissim sed. Praesent hendrerit massa orci, et gravida mauris porta vel. Morbi eget efficitur augue. Nullam id magna id magna finibus blandit sit amet eu tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas tincidunt enim id finibus pretium. In varius elit hendrerit, tempor magna in, vehicula turpis.</p>
    <h2>Title</h2>
    <p>Some text.. </p>
  </div>
  
  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus feugiat porta.</p>
     <h2>Title</h2>
    <p>Some text..</p>
        <h2>Title</h2>
    <p>Some text..</p>
        <h2>Title</h2>
    <p>Some text..</p>
        <h2>Title Medium</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus feugiat porta. Curabitur dui est, bibendum in nisl quis, tempor dictum nisi. Nam vel aliquam ligula. In eget nunc odio. Aenean ornare elit sed augue sodales consectetur. Nam sagittis leo nunc, sit amet consectetur lorem dignissim sed. Praesent hendrerit massa orci, et gravida mauris porta vel. Morbi eget efficitur augue. Nullam id magna id magna finibus blandit sit amet eu tortor. </p>
  
  </div>
  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
        <h2>Title Short</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus feugiat porta. Curabitur dui est, bibendum in nisl quis, tempor dictum nisi. Nam vel aliquam ligula. In eget nunc odio. Aenean ornare elit sed augue sodales consectetur. Nam sagittis leo nunc, sit amet consectetur lorem dignissim sed. Praesent hendrerit massa orci, et gravida mauris porta vel. Morbi eget efficitur augue. Nullam id magna id magna finibus blandit sit amet eu tortor. </p>
        <h2>Title</h2>
    <p>Some text..</p>
        <h2>Title Shorter</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus feugiat porta. Curabitur dui est, bibendum in nisl quis, tempor dictum nisi. Nam vel aliquam ligula. In eget nunc odio. Aenean ornare elit sed augue sodales consectetur.</p>
        <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
Nahuel Vivian
  • 1