1

Trying to set up a outer DIV that is 114px high and 100% wide (page width). Inside that I want three DIVs left, center and right. The height of these inner 3 divs vary. I'd like all three inner DIVs to be centered top to bottom (vertically aligned).

I have gotten close floating left and right or left:0 and right:0 but stuck on the vertically centered part. Left and right DIVs contain images center text only. Having a hard time getting images to show on jsfiddle so I can't provide much of an example, sorry.

I have found examples with top and bottom alignment but no luck centered.

Thanks!

EDIT:

TyBlitz, you pointed me in the right direction. Thanks! However, on your container div height - inner div height you then need to divide by 2. For your example:

114-50=64 then divide by 2 = 32 for top. 

Also needed to play around with text-align (left/center/right) Not thrilled making all inner DIVs 33% but it works. Seems like I should be able to have them scalable width and still position them correctly. Here is my fiddle with example images imbedded: My Fiddle

1
  • If you like tyblitz' answer then accept as n answer or at least upvote.
    – Alex Berry
    Feb 27, 2014 at 9:13

3 Answers 3

2

Like so?

Simply float the 3 divs, give each of them a height, position them relatively (important!) and give them a top: container.height - innerdiv.height; E.g. container.height of 114 & innerdiv.height of 50 => 114-50 = 64=> top: 64px;

EDIT: Well if you don't want to make your divs all 33% , with some simple math you can approximately position your divs with the float and margin properties.

Like in this fiddle of yours I updated.

The math behind it is:

  1. Container.length - combined innerdiv.length = unoccupied.length
  2. margin-left: unoccupied.length / x (eg 50px / 5 = margin of 20% = 10px)
2
  • Tyblitz, that is close but I'd like the center DIV to always be centered and the Left/Right always far left and far right no matter the width. If I take off the 33% width for each (Right/Center/Left) DIV they end up all left aligned one after the other
    – RichP
    Sep 10, 2013 at 12:41
  • @RichP Edited my answer, does it fit you better?
    – webketje
    Sep 10, 2013 at 23:38
1

I think this can solve your problem, although you'll have to create 3 wrapper divs.

HTML

<div class="outer">
    <div class="leftDiv">
        <div class="leftInnerDiv">Left Div</div>
    </div>
    <div class="rightDiv">
        <div class="rightInnerDiv">Right Div</div>
    </div>
    <div class="centerDiv">
        <div class="centerInnerDiv">Center Div</div>
    </div>
</div>

CSS

.outer,
.leftDiv,
.rightDiv,
.centerDiv{
    height: 114px;
}

.leftDiv{
    float: left;
}
.rightDiv{
    float: right;
}
.centerDiv{
    overflow: hidden;
}

.leftDiv:before,
.rightDiv:before,
.centerDiv:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.leftInnerDiv,
.rightInnerDiv,
.centerInnerDiv{
    vertical-align: middle;
    display: inline-block;
}

.leftInnerDiv{
    background-color: red;
}
.rightInnerDiv{
    background-color: green;
}
.centerInnerDiv{
    background-color: blue;
}

jsfiddle link: http://jsfiddle.net/pv6yJ/1/

Please note though:

  • The right div is declared before the middle div in the html.
  • My solution (css vertical align) doesn't work on IE7 or lower.
0

I've created this example to show how to vertically align the container and use column count (css3) which will automatically layout the 3 divs into 3 equal columns.

-moz-column-count: 1;
-webkit-column-count: 3;
column-count: 3;

and for non supporting browsers (IE) you can just set the width to 33% and float left.

http://codepen.io/tom-maton/pen/oqsEJ

Hope this helps

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.