How to make rounded corners on equal height columns

Question

I need to make three equal height columns with varying amounts of content with rounded corners. the corners need an 8px border radius. I would prefer to accomplish this with pure CSS if possible.

Right now my html looks like this:

<div class="col-w">
      <div class="col-h col-1">
        <h2>About Us</h2>
        <p>Founded in 1995 in Atlanta, Georgia, The Creative Circus is an accredited, two-year, portfolio-building, educational program for the creative side of the Advertising, Interactive Development, Design and Photography industries. Located in an energetic, converted warehouse that feels more like an agency, design firm or studio than a traditional school, future creatives build portfolios that help them land the best jobs in the field.</p>
        <p><a href="http://www.creativecircus.edu">Find out more about us.</a></p>
      </div>
      <div class="col-h col-2">
        <h2>Admissions</h2>

        <p>The Creative Circus is committed to seeking out and enrolling applicants of high standard. Our school follows a selective admissions process which includes a required admissions interview and portfolio submission. Admission is based on your commitment and dedication to your field of interest as determined by an admissions interview. This selection process allows us to provide a unique creative learning environment filled with the “best-prepared, most avidly sought-after creatives in the industry.”</p>
      </div>
      <div class="col-h col-3">
        <h2>Programs of Study</h2>
        <p>Since 1995, we’ve seen a lot of changes.  But through all the trends, we still have one mantra – concept is king. Whether you come for Art Direction, Copywriting, Design, Image or Interactive Development, original ideas are what get you hired.</p>
        <p>For more information about what we teach and why, please <a href="http://www.creativecircus.edu">download our Course Catalog</a></p>
      </div>
</div>

and my CSS looks like this:

div.col-w {
    overflow: hidden;
}

div.col-w.col-b {
    font-size: 0;
    height: 8px;
}

div.col-w div.col-h {
    background-color: #FFF;
    border: 8px solid #B2A68E;
    -moz-border-radius: 8px;
border-radius: 8px;
    float: left;
    margin-bottom: -9000px;
    margin-right: 5px;
    padding: 10px 10px 9010px;
    width: 29%;
}

My bottom borders are all messed up. Any suggestions?

http://www.css3.info/preview/rounded-border/ here ya go – corroded Aug 11 '11 at 20:30 — corroded, Aug 11 '11 at 20:30

score 3 · Answer 1 · answered Aug 11 '11 at 21:39

3

Here is a quick magic prototype for you: http://jsfiddle.net/6nVdT/

The point is: to use wrappers as a faux boxes, and positioning the columns over them.

There are a lot of things to improve, but you must get the idea.

answered Aug 11 '11 at 21:39

kizu

42,604
4
68
95

score 0 · Answer 2 · answered Aug 11 '11 at 20:30

Well you could start with creating 3 columns, within a wrapped DIV.

#3colWrap{ width: 900px; }
.col{ width:300px; height:500px; float:left; }

<div id="3colWrap">
     <div class="col">Column 1</div>
     <div class="col">Column 2</div>
     <div class="col">Column 3</div>
</div>

That should give you 3 columns side by side, with equal height in a wrapper. (wrapper may not be necessary, but keeps things from floating either on top, or below the columns.

Now you want rounded corners right?

I could give you the plethora of ways to do this, but an easy tool is located here:

http://border-radius.com/

Which your CSS should look something like:

.col{ 
     width:300px; 
     height:500px; 
     float:left; 
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
      border-radius: 5px;
}

i do not believe IE supports this at this time, but who cares...

unless I missed anything, that should do you right.

score 0 · Answer 3 · answered Aug 11 '11 at 21:05

Would you be interesting in using JavaScript for this? You could run a little piece of JavaScript to iterate through the three columns, get each of their heights, then set all of them to the highest height. I've done this before for your exact situation (wanting to even out columns with CSS3 rounded corners without setting a fixed height).

score 0 · Answer 4 · answered Oct 11 '11 at 19:20

0

This demo works also

http://jsfiddle.net/BMCT3/1/

http://jsfiddle.net/BMCT3/

Terry Riegel

answered Oct 11 '11 at 19:20

Terry Riegel

159
10

Leah · Answer 5 · 2011-08-11T21:53:21.787

First of all, I would change your CSS like this:

div.col-w div.col-h {
    background-color: #FFF;
    border: 8px solid #B2A68E;
    -moz-border-radius: 8px;
    border-radius: 8px;
    float: left;
    margin-right: 5px;
    padding: 10px 10px 10px;
    width: 26%;
}

Using CSS on its own, there isn't a way to force the three columns to be the same height. You could use a min-height or height to force them all to have the same height. However, the problem with this especially in your case is that you have a liquid layout so the height you choose could either be too short or too tall, depending on the size of the window.

Edit: There is a way to make columns look like they are the same width using CSS: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

You can use javascript to force the three columns to take an equal height. Here's an example of a jQuery plugin: http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

How to make rounded corners on equal height columns

5 Answers5

Linked