Jasper Kuperus wrote: >Recently I've been working on the accessibility of one of my websites >(http://www.overhoorjesuf.nl/). I've been through the whole website with >a blind internet user. Out of accessibility reasons its better to switch >the menu and content in the source from place (#menu and #content). > >Now that doesn't seem to be a problem. But when I do that, the menu will >get displayed underneath the content. Of course that doesn't really >surprise me, because the width of #content has a width of 100% and the >menu has a width of 182px. That just doesn't fit next to eachother when >you float. Now what does surprise me is the fact that this worked when I >had #menu above #content in my source. > >
This is how floats work. When #menu comes before #content and you float #menu left, it moves as far to the left as it can and #content flows up around it. Note that I didn't say that #menu moves up. It's #content that moves up to wrap around #menu. So, when #menu comes after #content and you float #menu left, it does the exact same thing -- moves as far to the left as it can. It doesn't move up because that's not what it should do as a float. Any content that comes after it should move up beside it, but it shouldn't move up itself. Does that help you understand how floats work a little better? >Now I already figured something out, but that brought another problem >with it. I gave #menu the following rules in addition: > >position: absolute; >top: 141px; > >Now this works perfectly. BUT... When my content div isn't high enough, >this will make my menu go over my footer. I've been thinking for a while >on this, but can't really find a fast solution to fix this problem. So, >does someone have a solution for this? I've made a testpage in which I >switched the menu and the content, you can find it on: >http://curunir.nl/OHJS/template.php. > > I would use negative margins with floats. There are two different approaches: one that accommodates large content well and one that doesn't. Here are sample pages of each: http://www.pixelsurge.com/experiment/negative_margins_1.html http://www.pixelsurge.com/experiment/negative_margins_2.html Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/