1

How can I get both vertical borders to grow equally regardless of content height in any column?

<body style="margin:0;padding:0;">
  <div style="min-height:500px;width:100%;margin:auto;border-top:2px solid #333;border-bottom:2px solid #333;">
    <div style="min-height:496px;float:left;width:23%;border-right:2px solid #333;padding:0 5px;">
      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>
    </div>
    <div style="min-height:496px;float:left;width:33%;padding:0 5px;">
      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>
    </div>
    <div style="min-height:496px;float:left;width:33%;border-left:2px solid #333;padding:0 5px;">
      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>


      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>


      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>


      <div style="margin-bottom:20px">
        <a href="#">1</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">2</a>
      </div>

      <div style="margin-bottom:20px">
        <a href="#">3</a>
      </div>
    </div>
  </div>
</body>

enter image description here

NaN
  • 1,286
  • 2
  • 16
  • 29

1 Answers1

0

You need to clear the floated columns, in my case I used an added element (but there are MANY ways to do so), and also have height:100% for each column

Demo

On a side note, you should really use an external style sheet and classes, managing inline code is very difficult as is styling each element individually

Community
  • 1
  • 1
Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
  • Thanks Zach. I can see that it works, thanks. I plan to move all the css to a stylesheet once I get it all laid out the way I want it. – NaN Feb 23 '14 at 04:37
  • @NaN That seems counter intuitive and slow to me, but whatever floats your boat, at least until someone is telling you how to do it (: – Zach Saucier Feb 23 '14 at 04:40
  • You're right, I would agree that it's counter intuitive to do everything inline but the client continually changes his mind and it just seemed like a faster way for me to manage everything in the mean time. – NaN Feb 23 '14 at 04:45
  • Zach, are you still around? I'm a little confused here because I've copied what you did on jsbin and it looks exactly the same as what I had before. I can however see when it runs in jsbin that it looks perfect. Why whould this be? – NaN Feb 23 '14 at 04:56
  • @NaN [Let's go to a chat](http://chat.stackoverflow.com/rooms/info/48178/room-for-zach-saucier-and-nan?tab=general#) – Zach Saucier Feb 23 '14 at 04:59
  • I don't... What you did looks great on jsbin but if I copy everything and paste it into a new html file, the border on the left is shorter than the one on the right. I'm also using the same browser, so I'm at a loss – NaN Feb 23 '14 at 05:00