How to make rounded corners on equal height columns


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>

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.

<a href="http://www.creativecircus.edu">Find out more about us.</a>

</div> <div class="col-h col-2"> <h2>Admissions</h2>

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.”

</div> <div class="col-h col-3"> <h2>Programs of Study</h2>

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.

For more information about what we teach and why, please <a href="http://www.creativecircus.edu">download our Course Catalog</a>

</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?


Here is a quick magic prototype for you: <a href="http://jsfiddle.net/6nVdT/" rel="nofollow">http://jsfiddle.net/6nVdT/</a>

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.


This demo works also

<a href="http://jsfiddle.net/BMCT3/1/" rel="nofollow">http://jsfiddle.net/BMCT3/1/</a>

<a href="http://jsfiddle.net/BMCT3/" rel="nofollow">http://jsfiddle.net/BMCT3/</a>

Terry Riegel


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:

<a href="http://border-radius.com/" rel="nofollow">http://border-radius.com/</a>

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.


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).


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.

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

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


  • Pausing/suspending entire Erlang program
  • Difference between forward and sendRedirect
  • is it possible to escape character within single quotes in ruby?
  • Map did not render content
  • When to use Abstract Classes and Interfaces? [closed]
  • In what sense are languages like Elixir and Julia homoiconic?
  • Selective replication in mongodb
  • How to perform a selective extraction of text higlighted in yellow from an MS Word document?
  • Django: Using signals to save a ManyToMany field
  • iOS - Record the Voice while phone call in Objective c
  • specify which hook to skip on git commit --no-verify
  • I Am Able To Go Outside Array Bounds
  • Does OpenCL support a randomly accessed global queue buffer?
  • Ajax with asp.net mvc Partial view is not working correctly
  • How to replace “/” by “;” in files *.log to *.csv using batch on windows
  • How to make rounded corners on equal height columns
  • Standard Way of Storing User Preferences on Client via Web Application
  • Javascript image loader
  • How do I provide inline input to an IPython (notebook) shell command?
  • Streaming video file?
  • What is the sql query for this?
  • Adding a background image to a single table cell
  • Row_number() function for Informix
  • How to pause a python script running in terminal
  • How can I get process name of specific PID with ps command in alpine
  • How do I deploy my Node.js app with a opencv4nodejs dependency to Heroku?
  • Why does the first run of “XCTestCase -measureBlock:” takes so much time?
  • Get rendered html code in Backing Component from Composite Component
  • Watson Conversation - Why is the ANYTHING ELSE node not chosen
  • Local Development, Apache vs Developer - file permissions
  • What's the purpose of QString?
  • How to use carriage return with multiple line?
  • Cancel a live stream “fast motion” catch-up in Flash
  • Control modification in presentation layer
  • Adding custom controls to a full screen movie
  • Confusion with PayPal's monthly billing cycle