Forums

Hey CSS-Tricks!
Big time problem here. I’m currently working on a client project and I’ve coded my own responsive framework for it. So far so good, I encountered a few problems.

First, I had to do a 3 column layout. No problem, even if they have to be the same height with different content.

I did this to solve it: http://jsfiddle.net/teFYS/306/

Then I had to place the 100% wide buttons, in each column 1, at the bottom. I took them ou tof the col and placed them inside a button-wrapper below the cols, inside the col-wrap. Still works fine.

Here comes the problem: When I resize my window, the buttons stay of course below the boxes and not the ones they belong to. Since it’s a responsive website and framework, I need to find a way to fix it.

Any solution for this problem?

Markup:

<div class="row even row-col4 clearfix">
        <div class="col-wrap">
            <div class="col4 box">
                <p class="heading">Unser Service für Sie</p>
                <div class="box-content">
                    <ul class="box-menu clearfix">
                        <li><a href="#" class="it-services">Element 1</a></li>
                        <li><a href="#" class="solutions">Client- / Serverlösungen</a></li>
                        <li><a href="#" class="cloud-services">Cloud Services</a></li>
                        <li><a href="#" class="it-security">IT-Sicherheit</a></li>
                        <li><a href="#" class="telephone">Telefonanlagen</a></li>
                    </ul>
                </div>
            </div>
            <div class="col4 box">
                <h1>Der Betrieb</h1>
                <div class="box-content">
                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p><br /><p>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p><br />
                    <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                </div>
            </div>
            <div class="col4 box last">
                <h2>Lorem Ipsum Dolor</h2>
                <div class="box-content">
                    <ul>
                        <li>Leistungen von Uns</li>
                        <li>Leistungen von Uns</li>
                        <li>Leistungen von Uns</li>
                        <li>Leistungen von Uns</li>
                        <li>Leistungen von Uns</li>
                        <li>Leistungen von Uns</li>
                    </ul>
                </div>
            </div>  
        </div>
        <div class="button-wrapper">
            <div class="col4 box">
                <button class="btn big orange"><a href="#" title="Alle Leistungen">Alle Leistungen im Überblick</a></button>
            </div>
            <div class="col4 box">
                <button class="btn big orange"><a href="#" title="Alle Leistungen">Alle Leistungen im Überblick</a></button>
            </div>
            <div class="col4 box last">
                <button class="btn big orange"><a href="#" title="Alle Leistungen">Alle Leistungen im Überblick</a></button>
            </div>              
        </div>          
    </div>

I created a JSfiddle, since the css would be a tat too much here. http://jsfiddle.net/DTMgJ/

Any help is appreciated, since it’s an urgent problem and I have no clue how to fix it.