emarchak Posted September 5, 2009 Share Posted September 5, 2009 I have a bit of a sticky position that I got myself into. A client wants a two column layout (not content/sidebar, but legit two columns) with a footer attached to the bottom of the page. However, we're using Scriptalicious' blind up/blind down Ajax animation framework to dynamically resize both columns. This puts me in a sticky position because I cannot use the float command to place the columns because it makes the Ajax react badly.My interim solution is placing the left column with position:absolute; and the right with position:relative;. Which works fine except for the fact that the left (position:absolute) column pushes overtop of the footer when I expand its contents. If I do define the right column's top as top:-npx to make it sit flush with the left, then the right moves down alongside the left column when its contents are expanded.I'm stuck. Does anyone have any suggestions on getting the footer to wrap around both columns as they are resized?Here's the html: <body><div class="wrapper"> <div class="header"> <h1>Page Header</h1> </div> <div class="right"> <a href="#" onclick="Effect.BlindDown('exampleright');; return false;">Right Content</a> <div id="exampleright" class="example" style="display:none;"> <p>Left Content</p> </div> <div class="left"> <a href="#" onclick="Effect.BlindDown('exampleleft');; return false;">Left Content</a> <div id="exampleleft" class="example" style="display:none;"> <p>Left Content</p> </div> <div class="push"> </div> </div><div class="footer"> <p>Page Footer</p></div></body> And here's the css: .wrapper { width:750px; top:50px; left: 45%; margin-left: -375px; position: relative; padding: 0; float: none;}.header { background-repeat: no-repeat; width:750px; min-height:100px; background-position: 0 0; clear:both;}/* body */.content { position:relative; width:750px; min-height:100%; clear:both; padding: 10px 0 0 0; line-height: 1.5em;}.exampleleft { max-width:300px; position:absolute; z-index:-1; top:0; left:0px; overflow:visible; z-index:50; padding-top:20px;}.exampleright { max-width:300px; position:relative; z-index:2; top:-15px; left:400px; bottom:100%; z-index:1; padding-top:20px;}.example { float:right; width:425px; padding-bottom:60px; clear:both; width:380px;}/* footer */.push { clear:both; float:inherit;}.footer { position:relative; width:750px; left:50%; margin: 70px 0 0 -425px; padding: 1em 0 1em 0; text-align: center; max-height: 35px; overflow: hidden;} I would appreciate help with this very much! Link to comment Share on other sites More sharing options...
Ingolme Posted September 5, 2009 Share Posted September 5, 2009 And why would this not work with floated elements?AJAX has nothing to do with how a page is presented, AJAX just sends HTTP requests to the server. If the floated boxes are interfering with your Javascript then your Javascript probably needs to be changed.The only way to do this effectively is floating the boxes. The other alternative is to use a table. Link to comment Share on other sites More sharing options...
emarchak Posted September 7, 2009 Author Share Posted September 7, 2009 Ahhh, that's fair. I'm not too comfortable with Javascript, so I didn't want to go mucking around with the scripts.I shall try though. Thanks for the advice! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.