CODEWITHSUNDEEP
htmlcss
mauretto
mauretto

Reputation: 3212

Expand vertically a div

I have a div container, inside there are 3 div elements, each with their own content. The container is horizontally centered. I would like the three elements div fit the container's height.

<body>
    <div id="Container">
        <div id="A"><P>Some multiROW<br>content</P></div>
        <div id="B">single row content</div>
        <div id="C"><P>Some multiROW<br>content</P></div>
    </div>
</body>

JSFiddle

In the example, the middle cyano element should have the same height as other divs. The content should vertically centered too. How can I get it?

Upvotes: 0

Views: 136

Answers (4)

annam priyatam
annam priyatam

Reputation: 101

Are you asking for this...

height:auto;

This will make the container set its height automatically, no matter how many DIV's are there in it...

:::::::::::::: EDIT ::::::::::::

<style type="text/css">
#container{width:1000px;height:auto;background-color:#CCCCCC;}
#A{width:900px;height:300px;background-color:#00FF00;}
#B{width:900px;height:100px;background-color:#99FFFF;}
#C{width:900px;height:400px;background-color:#CC99FF;}
</style>

Upvotes: 0

Marcob14
Marcob14

Reputation: 141

How about the following: http://jsfiddle.net/7ecm7qzh/

(using table-cell as display property, with middle vertical alignment, and 100% height)

<div id="Container">
    <div id="A"><P>Some multiROW<br>content</P></div>
    <div id="B">single row content</div>
    <div id="C"><P>Some multiROW<br>content</P></div>
</div>

#Container {
width: 50%;
margin: auto;
display:table;
}

#Container div{
    vertical-align:middle;
    display:table-cell;
    height:100%;
}

#A {
    width: 15%;
    text-align: right;
    background-color: red;
}

#B {
    width: 70%;
    text-align: center;
    background-color: aqua;
}

#C {
    width: 15%;
    text-align: left;
    background-color: yellow;
}

Upvotes: 1

user3171894
user3171894

Reputation:

try this

http://jsfiddle.net/KHFn8/5161/

#Container {
    width: 50%;
    margin: auto;
    display:table;
}

#A {
    width: 15%;

    text-align: right;
    background-color: red;
    display:table-cell;
}

#B {
    width: 70%;

    text-align: center;
    background-color: aqua;
    height: inherit;
     display:table-cell;
   vertical-align: middle;
}

#C {
    width: 15%;

    text-align: left;
    background-color: yellow;
     display:table-cell;
}

Upvotes: 0

Vishal Santharam
Vishal Santharam

Reputation: 2023

Try this,

#Container {
    width: 50%;
    margin: auto;
    overflow: hidden;
    position: relative;
}

#A {
    width: 15%;
    float: left;
    text-align: right;
    background-color: red;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

#B {
    width: 70%;
    float: left;
    text-align: center;
    background-color: aqua;
    margin-bottom: -99999px;
    padding-bottom: 99999px;

}

#C {
    width: 15%;
    float: left;
    text-align: left;
    background-color: yellow;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Reference : http://css-tricks.com/fluid-width-equal-height-columns/

Upvotes: 0

Related Questions