How can I best port a frame-based "HTML of yesteryear" application to modern CSS(3)? [closed]

Question

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 8 years ago.

Improve this question

I have an old HTML-based webapp that I am modernizing, and I wanted to see if there was anything better than my off-the-cuff CSS use to find an equivalent for the frames.

To simplify slightly, there are three roughly equal frames side by side. All three of them scroll vertically. The best approach I can think of now is to float everything left, with appropriate width and margin-left, and use overflow-y (and, where horizontal scrolling makes sense, overflow-x) settings for the DIVs in question.

Is "float everything left and set width and margin-left" optimal, and if not, what would be a more idiomatic way to replace the frames?

Thanks,

Answer 1

Replacing frames is tricky if the different frames use different style sheets, JS and what not.

If that is not an issue in your case and you can just copy the relavent part of the HTML from the three frames to one new HTML page with three vertical DIV's of some sort then I would suggest that you use something the overflow technique that you described. Position them absolutely with a width of 33% and a height of 100%.

You could use floats, but that might result in all kinds of annoying issues. In yoru case I'd go for position: absolute

<div class="c c1">
    loooooong content
</div>
<div class="c c2">
    loooooong content
</div>
<div class="c c3">   
    loooooong content
</div>

.c {
    position: absolute;
    width: 33%;
    height: 100%;
    top: 0;
    overflow-y: scroll;
}
.c1 {
    left: 0;
}
.c2 {
     left: 33%;
}
.c3 {
    left: 66%;
    width: 34%;
}

here's a jsfiddle: http://jsfiddle.net/9CAYb/