Home/ Questions/Q 768133
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T18:08:00+00:00

What is the best way (using HTML/CSS) to create an iTunes-style layout with the

  • 0

What is the best way (using HTML/CSS) to create an iTunes-style layout with the following features:

  • a left column with a fixed width but
    fluid height (scrollbars for
    overflow) (BLUE below)
  • a main content column with
    fluid width and height (scrollbars for overflow) (RED below)
  • a bottom right
    box with fixed width and height which
    remains stuck to the bottom of the
    browser? (GREEN below)

Here is an example:

iTunes layout example as described above

I’m happy to use Javascript/JQuery if there really isn’t a pure CSS solution.

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    http://fiddle.jshell.net/RAkKN/show/:

    <!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.

    • 0