两个侧边栏和灵活的中心列CSS

时间:2012-10-08 13:45:10

标签: html css

三柱网格,带有固定宽度的侧边栏和流体中心。

我很难过。我有这些属性:

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

然后在我的模板中调用它就像这样:

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

但是,它会将左侧边栏置于“内容”的顶部,并将右侧边栏置于其下方。我怎么能克服这个?

如果侧边栏中没有内容,我希望中间内容填满所有可用空间。这就是为什么我试图在可用空间之间将其设置为100%。因此,如果没有左列,我希望中间内容自动填满页面的左侧2 / 3rds。

2 个答案:

答案 0 :(得分:0)

你需要向左浮动你的div,然后确保总宽度小于或等于容器的100%。

一个粗略的想法:

#sidebar, #content {float: left;}
#sidebar { width: 10%; }
#content { width: 80%; }

答案 1 :(得分:0)

感谢您的帮助。我相信我已经在stackoverflow上找到了答案: 我想我在这里找到了答案:

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