CODEWITHSUNDEEP
htmlcssalignmentvertical-alignment
moorara
moorara

Reputation: 4226

How to vertically align div containers with CSS?

I am looking for a general and complete solution to this common problem! I have HTML code like this:

<div id="CONTAINER">
    <div id="CONTAINER_LEFT"></div>
    <div id="CONTAINER_RIGHT"></div>
    <div id="CONTAINER_CENTER"></div>
</div>

I want to write CSS that lets me align the inner div elements vertically so their top edges are in line. Other considerations:

  1. The Left and Right containers have fixed width.
  2. The Center container has to fill the remaining width between Left and Right containers.
  3. The height of each inner container depends upon its content and so varies between containers.
  4. No overlapping is intended, the aim is something like the following image.
  5. The height of the outer container should be equal to the greatest height of inner containers, if it is possible!!

top edges line up

The colors are just for displaying the idea!

I used "float: left;" and "float: right;" properties for the Right and Left containers but if the Center container has too much content, the area of this container fills the space below the floated elements! Also, I need a footer below the root container with width of 100%; any solution should consider this!

Upvotes: 1

Views: 14555

Answers (5)

Eliran Malka
Eliran Malka

Reputation: 16263

If you intend for the (center) container to fill the available space underneath it, you're probably looking for the faux columns technique.

The idea is that you don't try and control the columns height, but instead apply a background image to simulate equal length columns.

Go to the famous article on a list apart on faux columns and read further to implement this, it's quite easy.

Upvotes: 0

Kamal
Kamal

Reputation: 2180

hi please try this code

HTML

<div id="left"></div>
<div id="right"></div>
<div id="center">here you van place your text</div>

CSS

#left + #right + #center {
    MARGIN-LEFT: 203px;
}
#left + #content {
    MARGIN-LEFT: 203px;
}
#right + #center {
    MARGIN-RIGHT: 203px
}

#left
{
    float:left;
    width:200px;
    background:#00CC99;
    height:300px;
}
#right
{
    float: right;
    width:200px;
    background:#33FF66;
    height:400px;
}
#center
{
    height:550px;
    padding:10px;
    background:#006666;
    color:#fff;
}

Upvotes: 0

gitaarik
gitaarik

Reputation: 46300

This seems to be the simplest solution and works under IE7-9, FF, Chrome, Safari and Opera:

.container {
   overflow: hidden;
   background: grey;
}

.left {
   float: left;
   width: 200px;
   background: red;
}

.middle {
   margin-left: 200px;
   margin-right: 200px;
   background: green;
}

.right {
   float: right;
   width: 200px;
   background: blue;
}

Upvotes: 0

SpaceBeers
SpaceBeers

Reputation: 13947

This is easy enough to do - http://jsfiddle.net/spacebeers/dBvXY/2/

This uses the equal height CSS columns technique outlined here - http://www.ejeliot.com/blog/61

You set your main columns to have a massive bottom padding and an equal negative bottom margin. Your container needs to have overflow set to hidden. Adjust the numbers accordingly but to quote Brain Fantana "60% of the time it works every time".

.container {
    width: 100%;
    overflow: hidden;    
}

.left{
    float: left;
    padding: 0px 10px 0px 0px;
    width: 90px;
    background: red;
}

.middle{
    top: 10px;
    margin-left: 100px;
    margin-right: 100px;
    background: green;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
}

.right{
    float: right;
    background: blue;
    padding: 0px 10px 0px 10px;
    width: 90px;
}​

<div class="container">
    <div class="left">
        Some content for the left column.
    </div>
    <div class="right">
        Some content for the right column.
    </div>
    <div class="middle">
        Some content for the middle column.
    </div>
</div>

​

Upvotes: 1

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32182

Hi you can define any with according to your layout as like this

css

.wraper{
    display:table;
    margin:0 auto;
    overflow:hidden;
}
.left{
    display:table-cell;
    background:red;
}

.center{
    display:table-cell;
    margin:0 auto;
    width:200px;
    background:green;
    height:50px;
}


.right{
    display:table-cell;
    background:yellow;
}

​

HTML

<div class="wraper">


    <div class="left">left</div>
    <div class="center">Center</div>
    <div class="right">right</div>

</div>
    ​

Live demo here http://jsfiddle.net/rohitazad/WeQN2/

Upvotes: 0

Related Questions