CODEWITHSUNDEEP
htmlcss
Simon
Simon

Reputation: 5422

Variable height for multiple columns of div

I want to put 3 div like columns. The one on the left and the one the right have a content and variable length. The one in the middle is a divider. My CSS is:

html
{
    background:url(../img/texture.png) 50% 0 repeat #fff;
}

body
{
    font:13px/20px "Trebuchet MS", Helvetica, sans-serif;
    position:relative;
    min-width:960px;
}

html, body 
{
    height:100%;
}

    .main
    {
        background-color:#f8f8f8;
        padding:2px;
        border:1.5px solid #000000;
        border-radius:1em;
        -webkit-border-radius:1em;
        -moz-border-radius:1em;
        -o-border-radius:1em;
        margin:auto;
        width:950px;
        box-shadow:0 0 20px #585858;
        word-wrap:break-word;
    }

    section#content
    {
        padding:10px 0px;
        overflow:hidden;
    }

    section#content #text
    {
        margin:10px 20px 0px;
        text-align:center;
    }

        #text #login
        {
            width:40%;
            margin-left:5%;

        margin-right:5%;
        float:left;
        text-align:left;
    }

    #text #registration
    {
        width:40%;
        margin-left:5%;
        margin-right:5%;
        float:right;
        text-align:left;
    }

    #text #divider_ver
    {
        float:left;
        height:100%;
        width:1px;
        background:#000000;
    }

And my JSP:

<body>
<div class="main">
    <section id="content">
        <div id="testo">
            <div id="text">
                <div id="login">
                    ...
                </div>
                <div id="divider_ver"></div>
                <div id="registration">
                    ...
                </div>
            </div>
        </div>
        <div class="clear"></div>
    </section>
</div>
</body>

The problem is that the divider won't show up. If I set its height like: min-height:100px; it will, but will have fixed height (100px). I want it to have the height of the taller between the other 2 div, but I can't do it.

Upvotes: 0

Views: 510

Answers (1)

ogur
ogur

Reputation: 4586

http://jsfiddle.net/2mjet/1/

Here:

CSS changes

section#content #text
{
    margin:10px 20px 0px;
    text-align:center;
    overflow: hidden;
}

#text #divider_ver
{
    float:left;
    padding-bottom: 10000px;
    margin-bottom: -10000px;
    width:1px;
    background:#000000;
}

Simple +padding -margin with overflow:hidden container, but it's nice trick to remember.

Upvotes: 1

Related Questions