How to float left content and fix right content? - html

Question

I am working on a structure to have a top navigation fixed, a left nav to be scrollable and a right nav to be fixed.
I have created a fiddle here. just need help with the css.
http://jsfiddle.net/PxbX9/
#header {
position:fixed;
background:red;
width:700px;
height:30px;
}
#left-block {
float:left;
width:350px;
background:blue;
height:1000px;
margin-top:30px;
}
#right-block {
float:left;
width:350px;
height:1000px;
background:pink;
margin-top:30px;
.fixed-block {
postion:fixed;
height:1000px;
}

Answer 1

This can be achieved by restructuring your CSS to this:
#header {
position:fixed;
background:red;
width:700px;
height:30px;
}
#left-block {
float:left;
width:350px;
background:blue;
height:1000px;
margin-top:30px;
}
#right-block {
display: inline-block;
float:right;
width:350px;
height:1000px;
background:pink;
margin-top:30px;
position:fixed;
}
I've only made CSS changes to the #right-block selector.
Removed the class .fixed-block, which had a typo in the form of postion (should be position).
position: fixed; has been added to the #right-block selector.
display: inline-block; and float: right; have been added also.
DEMO
Hope this helps.

Answer 2

Take a look at that Working Fiddle
Pure CSS solution, Very Dynamic, Totally responsive.
HTML:
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="RightContent">
</div>
<div class="LeftContent">
</div>
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.HeightTaker
{
position: relative;
z-index: 1;
}
.HeightTaker:after
{
content: '';
clear: both;
display: block;
}
.Wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
.Header
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Wrapper > div
{
height: 100%;
overflow: auto;
}
.LeftContent
{
/*for demonstration only*/
background-color: #90adc1;
}
.RightContent
{
float: right;
width: 500px;
/*for demonstration only*/
background-color: #77578a;
}