CODEWITHSUNDEEP
htmlcss
user892381
user892381

Reputation:

CSS columns maintain same height

I am trying to setup some css to have 3 columns.

With the middle and the right column able to have text in them. I have it currently so that the middle column will wrap text and all the other columns will resize based on that column. I need the right column to affect the other columns in the same manner. I'm no CSS expert and code mainly in C#.

I've tried other solutions and this is the closest I've gotten to what I desire. Any thoughts?

The CSS so far: 

#outer
{
    width: 100%;
    margin: auto;
    padding:0;
}

#leftcolumn
{
position: absolute;
height: 100%;
width: 5px;
-webkit-border-radius: 0px;    
margin: 0 ;
background-color: Yellow;
z-index:10;    
left:0px;
top:0; 
}

#rightcolumn
{
position: absolute;
height: 100%;
width: 75px;
-webkit-border-radius: 0px;    
margin: 0 ;
background-color: green;
right:0px;
top:0; 
}

#middlecolumn
{
-webkit-border-radius: 0px;    
margin-left:5px;
margin-right:75px;
background-color: #62A9FF;
left:0px;
top:0px; 
}

#inner
{
width:100%;
margin:0 auto;    
position: relative;
-webkit-transform: rotate(0deg); 
-webkit-transform-origin:50% 50%; 
}

http://jsfiddle.net/6eshT/15/

Upvotes: 0

Views: 155

Answers (4)

Alexandr Skachkov
Alexandr Skachkov

Reputation: 560

You can use display:flexbox more about this http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

enumag
enumag

Reputation: 916

It's very easy using display: table-cell;.

Upvotes: 1

David
David

Reputation: 4873

The easiest way to make multiple columns all the same height is with faux columns. http://line25.com/articles/create-sidebars-of-equal-height-with-faux-columns

Upvotes: 0

Jacques
Jacques

Reputation: 3774

I do not believe you can do this with straight CSS, but you can use jQuery to achieve this pretty easily.

Here is a fiddle: http://jsfiddle.net/6eshT/8/

Basically, you set all the columns to have the same class name. Have at least one common class, ie class="col somethingElse" The "somethingElse" can be a class specific to style each column.

jQuery would be:

$('document').ready(function(){
    var max = -1;
    $(".col").each(function() {
        var h = $(this).height(); 
        max = h > max ? h : max;
    });
    $(".col").css({ 'height' : max })
});

Upvotes: 0

Related Questions