So I have been around the block on Drupal themes but I still don't have a good head for Drupal and CSS together, it can be maddening. Here is my scenario:
I would like to make a fairly flexible theme layout made up of four DIVs. The first DIV (flexible width) is the container of the others, the remaining three make up a main DIV (flexible width), a left sidebar DIV (fixed width) and a right sidebar DIV (also fixed width). My hope is as the browser window is resized that the parent DIV resizes and forces the main DIV to resize as well. The sidebars will always remain the same width.
Added to this, I would like sidebars to not appear if there is no sidebar content. I have a little php if statement that basically says "if there is sidebar content then print the sidebar, otherwise do nothing". This means the I would like the content DIV to stretch to fill in the missing width caused by the unrendered sidebar.
I need to sort out how to do a couple of things with the CSS. I can't figure out how to get a truly flexible main DIV, by width % or by the ugly max-width. When I try to do a percentage width value for the width of the main DIV, its taking a percentage of the parent container DIV and it doesn't work as the layout flexes and the sidebars don't. I would normally think that a 100% width would fill the full width of container minus the width of the two sidebars, but that is not the case.
The same is true of this stupid max-width value, and I don't really want to do that anyway.
Anyone have any ideas? Here is a little code, greatly simplified.
<div id="container">
<div id="main">
<?php if ($breadcrumb): print $breadcrumb; endif; ?>
<?php if ($title): print '<h2'. ($tabs ? ' class="with-tabs"' : '') .'>'. $title .'</h2>'; endif; ?>
<?php print $content ?>
</div><!--/main -->
<?php if ($sidebar_right): ?>
<div id="sidebar-right">
<ul><?php print $sidebar_right ?></ul>
</div>
<?php endif; ?>
<?php if ($sidebar_left): ?>
<div id="sidebar-left">
<ul><?php print $sidebar_left ?></ul>
</div>
<?php endif; ?>
</div><!--/container -->
Comments
Code tags didn't work?
Ok, my code tags broke. I don't know how to fix this.
code tags have been disabled
code tags have been disabled temporarily due to a security issue with the codefilter module. hopefully "a solution will be found" soon.
maybe this will help?
hi,
i don't know much. but i saw this online recently - it's only the css part - but maybe it will help. good luck!
http://www.alistapart.com/articles/holygrail
http://www.alistapart.com/d/holygrail/example_1.html
http://www.fu2k.org/alex/css/onetruelayout/example/interactive
Zen theme
I think that this sounds a lot like the Zen theme:
http://www.drupal.org/project/zen
You could look at that code and CSS. It's a very flexible theme.
-Mike Goodwin
http://www.not2us.net
http://www.redleafmedia.com