What is the best way (using HTML/CSS) to create an iTunes-style layout with the following features:
Here is an example:
I'm happy to use Javascript/JQuery if there really isn't a pure CSS solution.
Thanks!
I would suggest you look at ExtJs for this.
It will let you do quite sophisticated flexible layouts, and would work well for this kind of app, e.g., portal example.
The way I see it...you would want something like the following psudeo-css (this won't work IRL, you wouldn't want #left and #right measuring in percent [this should be set with javascript]).
html, body{height:100%;width:100%;margin:0;padding:0;}
.clearfix{/****the usual clearfix code****/}
#left {height:100%;float:left;width:25%;}
#top{height:75%;overflow:auto;}
#bottom{height:25%;}
#right {height:100%;width:75%;float:left;overflow:auto;}
You could also use, dare I say it...TABLES!
--
And lastly..you will need to use javascript.
<!doctype html>
<html>
<head>
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
div {
opacity: 0.5;
}
#red { background: red; }
#green { background: lime; }
#blue { background: blue; }
#green,
#blue {
width: 200px;
position: fixed;
left: 0;
}
#green {
bottom: 0;
height: 200px;
}
#blue {
bottom: 200px;
top: 0;
overflow: auto;
}
#red {
margin: 0 0 0 200px;
}
span { /* force overflow, for example */
display: block;
height: 3000px;
}
</style>
</head>
<body>
<div id="blue">
<span></span>
</div>
<div id="green"></div>
<div id="red">
<span></span>
</div>
</body>
</html>
This does not support IE6; there are a number of different ways you can go to get the exact same thing or merely similar in IE6 (even without JavaScript), but the least tedious probably is just to use JavaScript.