0

I am working on this website, and I am having some trouble with the columns. Right now there is a border around each column, which is the effect I want. However, I want them to be the same height. I understand the columns take the height of the tallest, but is there anyway to keep them the same throughout. I tried putting a container around each column separately, but I just could not get it to work. Any suggestions of how to accomplish this?

Here is the site: http://www.pitt.edu/~mkm49/1052/liquid.html

user1748319
  • 11
  • 4

2 Answers2

0

You need a "clearfix" ... after all the columns .. like this ...

<div class="clearfix"></div>

.clearfix { clear: both; }

here you can find more on a subject What methods of ‘clearfix’ can I use?

Community
  • 1
  • 1
Mohika
  • 35
  • 4
0

There there I got yo answer bro because I had the same issue myself a month ago... Well here's the answer:

CSS part 

  .col {
   float:left;
   margin-left:3%;
   width:20%;
   height:300px;
   border-radius:10px;
   border-style:solid;
   border-width:5px
   }

Html part

  <div class="col">
    <p>Lorem...</p>
  </div

  <div class="col">
    <p>Lorem...</p>
  </div

  <div class="col">
    <p>Lorem...</p>
  </div

Should work cuz that is was I use ^_^

user2805476
  • 46
  • 6