Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
General Design: Best way to implement header, footer, fixed left sidenav, and fluid content
Bottom of Page1 to 4 of 4
-
I thumbed through the Bulletproof design examples and neither seem to give me what I'm after. The float using percentages allows the sidebar to grow past the width that I want. Adding a set pixel width seems to do funky things. The second example uses ems, which in some ways is closer, but also not quite what I'm after. I need a solution that will provide a fixed width sidebar and a fluid content. Any tips?
Also, what is the best approach to making sure the column heights expand to fill the full height? -
-
CommentAuthorkari.patila
- CommentTimeAug 27th 2008
Do you mean like this:
http://www.intensivstation.ch/files/en_templates/temp02.html
You shouldn't have any problems with height, unless you are using floats inside the columns, in which case you should add a clearfix to the column like so:
<div class="column clearfix">
Here's the CSS class the clearfix refers to:.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */ -
-
@gogogob & @kari.patila
Actually, I wasn't clear in what I meant by fixed sidebar. I merely want to know the best way to create a layout with the standard header/footer, a fixed *width* sidebar, and a fluid content section. My mistake for not being more clear. And if it matters, I'll probably end up putting a max/min-width on the content section for readability.
I think I've found what I'm looking for here http://css.maxdesign.com.au/floatutorial/tutorial0815.htm.
1 to 4 of 4