Jump to content

Two Column Layout Without Float?


Recommended Posts

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

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.

Edited by Ingolme
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...