CODEWITHSUNDEEP
cssequals
umbriel
umbriel

Reputation: 751

Three column responsive equal height, with border. How to make it in CSS?

How do I make multiple columns with equal heights that has a border between each section AND keeping it responsive... (see image below). I know you can use a background image if you have two columns but when theres more, the whole responsive part goes going.

EDIT: heres a jsfiddle I've made: http://jsfiddle.net/kF9LA/

mockup of the desired layout

Upvotes: 1

Views: 5886

Answers (4)

Matt Coughlin
Matt Coughlin

Reputation: 18906

What about two bg images, one with a border 1/3 from the left, and one with a border 1/3 right from the right? Then apply them in a pair of containers with background-position:33.3% 0; and background-position:66.6% 0;, respectively.

Similar to using a single image with a border in the middle, and background-position:50% 0;

Edit:

After running a quick test this seems to work, and it's fluid/responsive.

HTML

<div class="container">
    <div class="bg1">
        <div class="bg2">
            <div class="content">...</div>
        </div>
    </div>
</div>

CSS

.container {width:100%; border:2px solid #000;}

/* Tile a 2x1 image for the border */
.bg1 {background:url(img/border.png) repeat-y 33.3% 0;}
.bg2 {background:url(img/border.png) repeat-y 66.6% 0;}

Edit 2:

Removed height:200px; from .content and added some text content to the demo, to show that the height can grow based on the content. Replaced the two bg images with a single 2x1 image.

Upvotes: 2

kristina childs
kristina childs

Reputation: 2210

I've got a couple of answers in a similar thread here. The best way to do this depends entirely on if you need the user to visually see the divs are the same height. If your final site will look like this mock-up (the only visual cue being the borders), you don't necessarily need to use MJT's method and instead could use a background image, like this.

As stated in the comment in the link above, this method won't work for horizontally fluid layouts, but if you have a fixed-width layout, you can use the background image for as many columns as you like. Just make sure you're math is right :)

However if your layout needs to be completely fluid, MJT's method is best. It requires extra mark-up, but is bulletproof.

Upvotes: 1

Tom
Tom

Reputation: 30698

The simplest way to achieve this is just to use a table with bordered cells, but if you have a lot of time on your hands, the CSS approach suggested by @nebulousGirl is the way.

Upvotes: 0

nebulousGirl
nebulousGirl

Reputation: 1364

You can take a look at the solution from Matthew James Taylor: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Upvotes: 1

Related Questions