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
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.
margin:0 160px 0 110px;
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-push-4 will move your element 4 columns to the right, so you can position all your columns