Sizing columns to match 1

[Rieekan]

Trying to build a section of a site that will allow a user to put in certain information like teasers for tools in columns. Unfortunately, the end users will be able to dynamically place content in these columns and I'm having a problem where the right border only stretches as far as it's DIV's content. Anyone have options on how to get this border to stretch to the bottom of the surrounding DIV?

CSS:

.columns h3 {
color:#0076CC;
padding:3px 3px;
border-bottom:1px solid #D4E5F7;
font-size:1em;
}

.columns h4 {
color:#333;
font-size:1em;
}

.columns img {
float:left;
padding:5px 5px;
}

.columns a {
color:#0076CC;
text-decoration:underline;
padding:0 10px;
}

.columns a.right {
border-right:1px solid #333;
}

.columns .col {
border-right:1px solid #D4E5F7;
display:block;
float:left;
margin:0;
padding:5px;
height:150px;
}

.columns .colRight {
display:block;
float:left;
margin:0;
padding:5px;
}

.columns .colRight h4 {
color:#333;
font-size:1em;
}

.threeCols .col {
width:30%;
}

.threeCols .colRight {
width:30%;
}

.twoCols .col, .colRight {
width:47%;
}

HTML:

        <div class="columns threeCols">
          <h3>Need Help Getting Started?</h3>
          <div class="col">
            <h4>Lorem Ipsum </h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque at  arcu. Sed fringilla massa ut pede.</p>
            <p><a href="#">Begin Here</a></p>
          </div>
          <div class="col">
            <h4>Lorem Ipsum Dolor </h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque at  arcu. Sed fringilla massa ut pede. Vestibulum pretium congue enim.</p>
            <p><a href="#">Begin Here</a></p>
          </div>
          <div class="colRight">
            <h4>Lorem</h4>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque at  arcu. Sed fringilla massa ut pede.</p>
            <p><a href="#">Begin Here</a></p>
          </div>
        </div>

Any help is appreciated...

 

[Rieekan]

Forgot to mention that this solution is going to be implemented on different page types, so a background image (faux columns) approach won't work.

Sorry about that!

- George

 

[Rieekan]

Anyone? Bueller?

*bump*

 

[dmacster]

A javascript solution here

http://www.projectseven.com/tutorials/css/pvii_columns/index.htm

had to use for a similar project - based on the last tag of the appropriate colum (i.e., <p> or whatever)

 

[Rieekan]

Thanks, I'll give this a shot. Have a star!

- George

 

[dmacster]

Thanks - it was quite simple to set up.