Trying to replicate the layout of the Facebook Android app on my page. The app features a 3 column design, with the central column exclusively displaying the header (no footer included, although I require one for my version).
This visual representation is illustrated in the image below.
The red and blue divs represent the left and right sidebars. The green and purple divs depict the central content area. The purple divs act as the header and footer, remaining fixed at the top and bottom of the page respectively.
An additional function needed is buttons placed on the header (top purple) that toggle the visibility of the sidebars. Initially, only the central content will be visible, with the ability to bring in the sidebars when necessary. Below is the code implemented so far, struggling to calibrate the width for the center div.
HTML:
<html>
<head>
<title>Sample</title>
<link rel="stylesheet" href="index.css" type="text/css" />
</head>
<body>
<div id="main">
<div id="leftBar" class="main">Left Bar</div>
<div id="content" class="inner">
<div id="header">Head</div>
<div id="body">Body</div>
<div id="footer">Footer</div>
</div>
<div id="rightBar" class="main">Right Bar</div>
</div>
</body>
</html>
CSS:
body {
margin: 0px;
}
div.inner {
height: 500px;
width: 50%;
background: red;
}
<div.main{
background: lime;
height: 200px;
overflow: hidden;
position: relative;
}
#leftBar{
float: left;
}
#content{
position: relative;
height: 100%;
float: left;
}
#rightBar{
float: right;
}
#header{
position: fixed;
top: 0px;
background: blue;
}
#body{
margin-top: 40px;
position: relative;
}
#footer{
position: absolute;
bottom: 0px;
}
Added JavaScript code within the provided fiddle link below: http://jsfiddle.net/mv6Bj/1/
The ideal width setting should ensure the center div spans the entire screen width. As the sidebars toggle into view, they ought to align themselves accordingly, shifting the center div left or right—a functionality derived from the Facebook app layout.
Current challenges faced include:
- The center div lacks full width and fails to adjust as elements appear/disappear
- The height of the center div does not consistently reach 100% coverage
- Upon clicking 'left', the leftBar vanishes and the content div shifts left while the header remains stationary