how to verticall align divs with float:left? - css

Question

I have this kind of structure....
<div class="container-fluid">
<div class="section_3 row">
<div class="image_info_carousel_left col-xs-12 col-sm-12 col-md-6 col-lg-6">
<h1>Stay organized with your personal moving dashboard</h1>
<div class="author">Get timely reminders and assign tasks to stay on top of your move</div>
</div>
<div class="info_image col-xs-12 col-sm-12 col-md-6 col-lg-6">
<img src="css/img/realtor-fourth.png" />
</div>
</div>
</div>
with this type of css....
.image_info_carousel_left {
padding: 100px 50px !important;
color: #fff;
background-color: #3B4C60;
}
.info_image {
padding: 0;
}
The height of the image within the image_info class varies dynamically... so the height of the image_info_carousel_left should also change & and the <h1> and <div class="author"> should be vertically centered...
I have tried using display:table & display:table-cell, but it doesn't work as classes with col-lg- are having float:left...
how can I do this?

Answer 1

this is the formula for vertical align anything.
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
Just put those commands to div you want to vertically align, or create a mixin if you are using preprocessors
I created this example to see it working with floats:
http://codepen.io/riogrande/pen/NxGROP

Answer 2

You can use display:inline-block; and vertical-align:middle; and don't forget to remove extra spaces which occurred by display:inline-block;.
Jsfiddle
* {
box-sizing: border-box;
}
.container {
width: 100%;
background: red;
padding: 10px;
}
.box {
display: inline-block;
vertical-align: middle;
width: 50%;
}
.box1 {
background: blue;
}
.box2 {
background: blue;
}
img {
width: 100%;
display: block;
}
<div class="container">
<div class="box1 box">
<img src="http://placehold.it/350x150">
</div><!--
--><div class="box2 box">heading with the fixed height</div>
</div>