Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
- Friends
-
I am making a few adjustments over at my site HowCurio.us. But, before I go any further, I need to address an issue I am having with the area I am working on. The div id sidebar has been placed on the bottom of the page, where I want it to have a separate color, yet the color I have applied to it doesnt seem to be working, it only does a little bit, then leaves the rest alone. Any ideas?
-
-
CommentAuthorthumblewend
- CommentTimeMar 13th 2006
It seems to me like it's a clear-cut case of the div "collapsing" because the content it contains has been taken out of the "document flow" due to being either "floated" or positioned "absolutely". There are a couple of things you can do to make it behave how I think you want it to ( to have the #sidebar div stretch down around its "children"). You can apply "float: left;" (or right) to the #sidebar. This will make it recognise any floats it contains and will stretch around them. The other solution would be to try "clear: both;" on the last element within the sidebar. I haven't looked close enough to see if this is a useful option for you however, but to learn more about this, just google "css clearing floats" or something.
I suggest simply trying "float: left;" on the sidebar first and see if that does what you want. You may also need to add "float: left;" to #page2 also - but maybe not. I noticed your .sb-about content is positioned using "position: absolute;" so it will never effect the size of #sidebar and will always sit at the bottom left of its parent, #page2. Hope this helped you - reading it back to myself I can see how it might be confusing - oh well, I tried. -
-
div height rendering problem. Much more visible in FF and opera, not much in IE. Drop this .fixit class in your css and call this class from sidebar div.
.fixit:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}
.fixit {display: inline-table;}
/* Hides from IE-mac \*/
* html .fixit {height: 1%;}
.fixit {display: block;}
/* End hide from IE-mac */ -
I suppoes thats the thing I almost always forget about floats, is that they take the content right out of the regular flow of the document. Once I inserted that cleared element, everything popped into place, including the sb-about div!
-
-
CommentAuthorthumblewend
- CommentTimeMar 14th 2006
Yeah. It's looking great too, by the way. Well done. -
-
Thanks! I am actually trying to get it so that the whole bottom part can expand or collapse, based on whether the user wants to see it. It uses a small script from moo.fx, but I am having a bit of trouble with it. You can take a look at the issue over here.
The box is behaving slightly odd, because I want to build from the bottom up, not expand from top down. Also, I'd like for the browser to automatically scroll to the bottom of the page when the user has expanded the box, otherwise the box exapnds underneath the view of the brower and the user doesnt has to then scroll down to see what has happened.
However, none of this is really under the purview of this forum, but if you have ideas, please let me know!
Original forum topic can be found here
1 to 6 of 6