CODEWITHSUNDEEP
csshtmlframeset
quape
quape

Reputation: 746

converting frameset into css

I'm trying to build a CSS page layout based on this old frameset:

<frameset cols="30%,70%">
    <frame>left</frame>
    <frameset rows="80%,20%">
        <frame>top</frame>
        <frame>bottom</frame>
    </frameset>
</frameset>

What was easy 15 years ago seems to get a bit more complicated nowadays. I wrote the following HTML:

<div id="container">
    <div id="left">left</div>
    <div id="right">
        <div id="top">top</div>
        <div id="bottom">bottom</div>
    </div>
</div>

Together with this CSS:

#container {
    border: 1px solid black;
    height: 300px;
}

#left {
    border: 1px solid red;
    float: left;
    width: 30%;
    height: 100%;
    overflow-y: scroll;
}

#right {
    border: 1px solid blue;
    margin-left: 30%;
    height: 100%;
}

#top {
    border: 1px solid red;
    height: 80%;
    overflow-y: scroll;
}

#bottom {
    border: 1px solid red;
    height: 20%;
}

I put a demo here.

What I want to achieve and failed so far is the following: Height of #bottom shall be a certain pixel height, not percents. When I do this, I mess up with #top. I tried to use absolute positions to stick #bottom at the bottom but then I don't know how to let #top use the rest of the height.

Any ideas would be appreciated. Thank you.

Upvotes: 2

Views: 4629

Answers (1)

km6zla
km6zla

Reputation: 4907

I think this (fiddle) what you are looking for.

#top {
    border: 1px solid red;
    height: 80%;
    overflow-y: scroll;
}

#bottom {
    bottom:0;
    border: 1px solid red;
    height: 20%;
}

The divs will look like they don't precisely fit but it's only because of the borders. If you want the borders then you can use the css box-sizing property and set it to border-box. See this page for reference. Basically it makes the size of an element include the border which it doesn't by default.

Upvotes: 1

Related Questions