I'd like to divide the browser window into two. The right side should contain a fixed-size column. The left side should contain a dynamic-sized column that fills the rest of the space.
My implementation has the following bug:
- Run the testcase (below)
- Shrink the window horizontally until the red bar has a width of zero.
- Notice that if you shrink the window further, the red bar suddenly increases in size.
- How do I get the red bar to remain hidden and the blue bar to begin shrinking?
UPDATE: It looks like the red bar is being pushed above the blue bar (like two <div>s rendering on different lines). Is there a way to force both blocks to render on the same line?
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
html
{
height: 100%;
/* Workaround until http://stackoverflow.com/a/2629446/14731 works */
font-size: 0;
}
body
{
background-color: #000000;
height: 100%;
margin: 0;
padding: 0;
}
#leftBar
{
margin-right: 400px;
height: 100%;
}
#largeVideo
{
position: relative;
width: 100%;
max-height: 100%;
background-color: red;
}
#rightBar
{
position: fixed;
width: 400px;
height: 100%;
right: 0;
background-color: blue;
}
</style>
</script>
</head>
<body>
<div id="rightBar"></div>
<div id="leftBar">
<video id="largeVideo" autoplay="autoplay"></video>
</div>
</body>
</html>
