CODEWITHSUNDEEP
csscss-floatvertical-alignment
TheNameHobbs
TheNameHobbs

Reputation: 729

Vertically align 2 floating divs with flexible height

I'm trying to figure out how to align 2 floating divs vertically. Each of the divs has a flexible height.

Here is what i have so far: http://jsfiddle.net/VLRpc/1/

 <div class="section">
    <div class="container">
        <div class="wrap">
            <div class="column left">
                <h1>Software</h1>
                <p>I use many software applications to achieve the best results.</p>
            </div>
            <div class="column right"></div>
        </div><!-- end wrap -->
</div><!-- end container -->
</div><!-- end section -->

.container {
width: 100%;
height: 100%;
display: table;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
}
.wrap {
vertical-align: middle;
display: table-cell;
padding: 0;
margin: 0;
border: 1px solid red;
}

/* Columns */
.column {
width: 45%;
height: auto;
float:left;
text-align: center;
border: 1px solid black;
}
.right {
margin-left:0;
height: 250px
}
.left {
margin-left:5%;
}

However the div on the left gets pushed to the top of the larger div which is on the right. I need both of these divs to be vertically centered.

Any ideas?

Upvotes: 3

Views: 12056

Answers (2)

RwwL
RwwL

Reputation: 3308

Here's how you could make it flexible (no fixed heights, just keep those .column containers vertically centered regardless of their content): set .column to display:inline-block and to vertical-align: middle inside your table-cell .wrap div.

.column {
    display: inline-block;
    width: 45%;
    height: auto;
    text-align: center;
    border: 1px solid black;
    vertical-align: middle;
}

http://jsfiddle.net/VLRpc/2/

Upvotes: 5

Francis Hurtubise
Francis Hurtubise

Reputation: 45

Here you go, just change the margin-top value in the left column, and all should be good. If you want more content in that column, add some padding-top too. Here is the changed css for it:

.container {
    width: 100%;
    height: 100%;
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
.wrap {
    vertical-align: middle;
    display: table-cell;
    padding: 0;
    margin: 0;
    border: 1px solid red;
}

/* Columns */
.column {
    width: 45%;
    height: auto;
    text-align: center;
    border: 1px solid black;
    margin:0;
}
.right {
    margin-left:0;
    height: 250px;
    float: right;
    margin-right: 1em;
}
.left {
    float: left;
    margin-top: 50px;
    margin-left: 1.4em;
}

Upvotes: 0

Related Questions