Add additional div tags and use % based values for all properties instead of pixel based.
The core ideas of using multiple containers among other things as commented
in the CSS file are taken from
http://www.maxdesign.com.au/articles/css-layouts/three-liquid/# giving them
the due credits they deserve. Thank you very much guys. I was struggling to
get a fully liquid three-column layout.
I made some changes as per my ideas.
<html>
<head>
<title>
{% block title %}PyTasks{% endblock %}
</title>
{% comment %}Load site wide CSS here. Additional styling must be
loaded in the block that follows{% endcomment %}
<link rel=stylesheet href="/pytask/static/css/base.css" type="text/css" >
<link type="text/css"
href="/pytask/static/css/jquery/ui/cupertino/jquery-ui-1.8.8.custom.css"
rel="stylesheet" />
{% block css %}
{% endblock %}
{% comment %}Load site wide javascript here. Additional scripts must
be loaded in the block that follows{% endcomment %}
<script type="text/javascript"
src="/pytask/static/jquery/jquery-1.4.4.min.js">
</script>
<script type="text/javascript"
src="/pytask/static/jquery/jquery-ui-1.8.8.custom.min.js">
</script>
<script type="text/javascript"
src="/pytask/static/jquery/jquery.qtip-1.0.0-rc3.min.js">
</script>
<script type="text/javascript"
src="/pytask/static/js/login.js">
</script>
<script type="text/javascript">
login_user("{% url auth_login %}");
</script>
{% block js %}
{% endblock %}
</head>
<body>
<div id="wrapper">
<div id="header">
<h2><a href="{% url home_page %}">PyTask</a></h2>
</div>
<div id="container1">
<div id="container2">
<div id="left">
{% include '_left_sidebar.html' %}
{% block leftsidebar %}
{% comment %}Additional Left Sidebar elements go here{% endcomment %}
{% endblock leftsidebar %}
</div>
<div id="center">
{% block content %}This is the default content{% endblock content %}
</div>
<div id="right">
{% block rightsidebar %}
{% comment %}Additional Right Sidebar elements go here{% endcomment %}
{% endblock rightsidebar %}
{% include "_right_sidebar.html" %}
</div>
<div class="clearer">
</div>
</div>
</div>
<div id="footer">
Designed by <a href="http://fossee.in">FOSSEE</a>
</div>
</div>
</body>
</html>