CODEWITHSUNDEEP
htmlcsstwitter-bootstraprow
Andres
Andres

Reputation: 2023

css column layout middle column shows same height as right column

I have 3 columns: left, right, middle. Can't seem to figure out how to prevent the middle column from displaying full height of the right column when I add a 

<div class="row"></div>

to use columns inside of it. Being that the class .row (bootstrap) in it's :before and :after has "display:table" then that causes that div to go full height of the right column and whatever text that comes after that row goes way at the bottom. Here's the jsfiddle

but just in case here's the basic code, there's really nothing advanced about it.

.container{
    height: auto;
   overflow: hidden;
}

.leftcolumn{
    float:left;
    width:100px;
    background:yellow;
}

.rightcolumn{
    float:right;
    width:150px;
    background:red;
}

.middlecolumn{
    margin:0 160px 0 110px;
    background:green;
    width:auto;
    height:auto;
    position:relative;
}

Upvotes: 0

Views: 51

Answers (1)

Iecya
Iecya

Reputation: 279

I fixed your code by let the middlecolumn float with the others two.

This way you just have to adjust some margin to center it horizontally.

You can find the demo here

The best solution to get the wanted result is using bootstrap grid system. You can wrap you columns inside a row and push/pull them with the proper classes. I.E. col-xs-offset-4 or col-xs-push-4 will move your element 4 columns to the right, so you can position all your columns

Upvotes: 0

Related Questions