Question

Three column grid with fixed width sidebars and fluid center.

I am having a hard time with this. I have these properties:

#sidebar { width: 65px; padding: 0px; }
#content { width: 100%; }

Then it is all called in my template like this:

{% block left_sidebar %} Test {% endblock %}
{% block content %} Content {% endblock %}
{% block right_sidebar %} Test {% endblock %}

However, it puts the left sidebar on top of the “content” and the right sidebar below it. How can I overcome this?

If there is no content in the sidebar I want the middle content to fill up all availiable space. That is why I was trying to set it as 100% between the available space. So if there is no left column, I want the middle content to automatically fill up the left 2/3rds of the page.

Answer 1

Thank you for the help. I believe I have found the answer on stackoverflow herE:
I think I found the answer here:

CSS layout (2 column layout, but if no sidebar main column must be 100% wide)