test of vertical layout

by hrabinowitz

HTML

<div id="outer">
    <div id="inner1">
        inner div 1. Some text...
        and more text.
        and yet more text.
    </div>
    <div id="inner2">
        inner div 2...
    </div>
</div>
<div id="outer2">
    <div id="inner21">
        inner div 1. Some text...
        and more text.
        and yet more text.
    </div>
    <div id="inner22">
        inner div 2...
        inner div 1. Some text...
        and more text.
        and yet more text.
        inner div 1. Some text...
        and more text.
        and yet more text.
        inner div 1. Some text...
        and more text.
        and yet more text.
    </div>
</div>

CSS

#outer {
    overflow: hidden;/* Makes #outer contain its floated children */
    width: 100%;

    /* Colours and borders for illustration purposes */
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;/* Make this div as wide as its contents */

    /* Colours and borders for illustration purposes */
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;/* Make this div take up the rest of the horizontal space, and no more */

    /* Colours and borders for illustration purposes */
    border: solid 3px #00c;
    background: #ddf;
}

/*-----------------------------------------*/
#outer2 {
    overflow-y: hidden;
    width: 100%;
    height: 80%;
    /* Colours and borders for illustration purposes */
    border: solid 3px #666;
    background: #ddd;
}

#inner21 {
    /* Colours and borders for illustration purposes */
    border: solid 3px #c00;
    background: #fdd;
}
#inner22 {
    overflow-y: hidden;/* Make this div take up the rest of the horizontal space, and no more */

    /* Colours and borders for illustration purposes */
    border: solid 3px #00c;
    background: #ddf;

}