Jesdisciple Posted October 11, 2008 Share Posted October 11, 2008 I rearranged the div elements on my tableless page (to order them logically for Lynx) and it broke. If I order them as they were, the page looks like http://jesdisciple.110mb.com/ except with a smaller footer. Help, please... http://rapidshare.com/files/153009373/accessible.zip Link to comment Share on other sites More sharing options...
Ingolme Posted October 11, 2008 Share Posted October 11, 2008 The order matters because all floated elements must go before the static elements that are next to them.I don't know exactly how you want to lay out your page, so I don't know what would have to be done to fix it. Link to comment Share on other sites More sharing options...
Jesdisciple Posted October 11, 2008 Author Share Posted October 11, 2008 It's supposed to arrange like this inside #maincontainer... #topsection-----------------+---------------------------#leftcolumn | #contentwrapper-----------------+---------------------------#footer Before this problem, I was under the impression that CSS would float the elements in the order I declared them. Also, what static elements do I have?Thanks again. Link to comment Share on other sites More sharing options...
Ingolme Posted October 11, 2008 Share Posted October 11, 2008 I was just talking in general.By static elements, I was referring to ones that weren't floated.The problem I find is that you've used absolute positioning for your left column. Remove position: absolute; from the #leftcolumn selector. Link to comment Share on other sites More sharing options...
Jesdisciple Posted October 11, 2008 Author Share Posted October 11, 2008 Now #leftcolumn doesn't stretch all the way down the screen and #footer falls below it. http://rapidshare.com/files/153009373/accessible.zipI know static means not floated... I'm wondering which ones those are. I thought they were all floated. Link to comment Share on other sites More sharing options...
Ingolme Posted October 11, 2008 Share Posted October 11, 2008 Your #topsection and #contentwrapper aren't floated because they need to take all the width of the page.Your left content won't stretch to the bottom, but you're making sure that the footer goes under it and not behind it. I assumed you wanted the footer below because you have "clear: both" in the CSS.Hmm, in order to make the page fit the vertical height of the screen you can only use percentages for all your vertical heights.Here's an example of how it could be done#topcontent: 12% height#leftcontent: 76% height#contentwrapper: 76% height#footer: 12% height Link to comment Share on other sites More sharing options...
Jesdisciple Posted October 11, 2008 Author Share Posted October 11, 2008 Oh, you're right. I got those floated and cleared, and that helped to make everything legible, but I can't seem to get #contentwrapper inside the content area... http://rapidshare.com/files/153009373/accessible.zip (links updated) Link to comment Share on other sites More sharing options...
Ingolme Posted October 11, 2008 Share Posted October 11, 2008 Don't float #contentwrapper to the left, and don't give it 100% width.You can remove the float and width properties from #contentwrapper.I don't recommend giving 100% height to your items. It's making a scrollbar appear.If you want them to take the full page, you're going to have to make sure the sum of percentages of all the heights is equal to 100, like I said in my previous post. Link to comment Share on other sites More sharing options...
Jesdisciple Posted October 11, 2008 Author Share Posted October 11, 2008 Your left content won't stretch to the bottom, but you're making sure that the footer goes under it and not behind it. I assumed you wanted the footer below because you have "clear: both" in the CSS.I do want it below. I was just noting the changes, although I did it in a confusing way because I wasn't sure how to fit a contrasting "but" in there.I think I've followed everything, except that I left the height of #footer and .push as an em value. http://rapidshare.com/files/153009373/accessible.zip Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.