Hi all

 

I have struggled trying to make this work over the last day or so and have totally given up. Basically, I want a site with two columns, and I'd like either column to be able to "elongate" or increase in height whilst the other column remains in position. Meanwhile, a set footer would move down the page as either column increased.

 

A brilliant example of what I'm on about is available here: http://www.sky.com/ -- If you go there, and just hit the "Log In" button on the right, you'll see the login box appears out of nowhere and the right hand column increases in height. Meanwhile, the page footer remains stable and moves down the page perfectly.

 

First of all, I would ask anyone if they have any tutorials/links on how Sky made the login box "appear" so attractively. Secondly, I'd ask the same about just how they made the columns and the footer behave so well. I'm sorry my questions are not more specific but this is a pretty nice looking feature!

 

Thanks to everyone who helps!

 

Rex

Look here

 

http://www.dynamicdrive.com/style/layouts/

 

maybe you will find something

Good Morning RexiRex!

 

What you are experiencing is a common problem for CSS beginners, so don't fret. You are in need of a basic multi-column layout, with a header and footer. To achieve this you will use floated "columns" inside a container, along with a footer that is "cleared" so that it is pushed down (and up) by either of the columns.

 

I have included the following code to help you get started, I've commented the code to explain exactly what is going on.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3c.org/TR/html4/strict.dtd">

<html>
<head>
	<title>RexiRex's Multi-column Layout</title>
	<style type="text/css">
		/* Global Reset (Basic Version) */
		/* This basically resets the margin and padding on all CSS elements
		   It makes things easier when you are doing things cross browser */
		*	{ margin: 0; padding: 0; }

		/* Set the width of the website and centre it */
		#page_wrapper		{ margin: 0 auto; width: 850px; }

		/* Header styling — I've just made the background gray to show where it is */
		#header				{ background: gray; }

		/* Footer styling — I've just made the background gray to show where it is */
		#footer				{ background: gray; }

		/* Column Wrapper — We are going to set an explicit width (100%) and put an
		   overflow on this element, this will clear the floats we use for the columns */
		/* I've also put a red background on this element to show it's position and layout */
		#column_wrapper		{ background: red; overflow: hidden; width: 100%; }

		/* Columns — Here we will set the styling for the content columns */
		/* Floating the column to the left will take it out of the "flow", which allows us
		   to position it to the left or right of a containing element */
		/* The total width of the main and side columns have to equal or be less than 100% of
		   the container width (850px). If they are any larger, one of the columns will jump
		   down and appear below the other column */
		/* I've added background colours to the columns for you to see where they are */
		#column_main		{ background: green; float: left; width: 70%; }
		#column_side		{ background: yellow; float: left; width: 30%; }
	</style>
</head>
<body>
	<!-- This is the page wrapper; It encases the entire website, we will use it to set the width of the 
	website and also to centre it if we need that functionality -->
	<div id="page_wrapper">

		<!-- This is the header of the website; in here you will put the logo, navigation, etc -->
		<div id="header">
			<!-- This would be your logo and navigation, but I've left it as text for the time being
			to keep things as simple as possible -->
			<div id="logo">Site Logo</div> <!-- END #logo -->
		</div> <!-- END #header -->

		<!-- This is the container of the columns, we apply an explicit width and overflow in the CSS so it "clears" and
		expands it's height to accommodate the columns -->
		<div id="column_wrapper">
			<!-- This is the main content area, I refrained from naming it "column_left", as you can easily change
			the CSS for it to be on the right if you want -->
			<div id="column_main">
				<!-- I've added some example content below, feel free to ignore it -->
				<h1>Title of your funky page</h1>
				<p>Some awesome paragraph text.</p>
				<!-- end of example content -->
			</div> <!-- END #column_main -->

			<!-- This is the side bar -->
			<div id="column_side">
				<!-- I've added some example content below, feel free to ignore it -->
				<h2>Some cool links</h2>
				<ul>
					<li><a href="http://google.co.uk" title="Google UK">Google</a></li>
					<li><a href="http://yahoo.co.uk" title="Yahoo UK">Yahoo</a></li>
				</ul>
				<!-- end of example content -->
			</div> <!-- END #column_side -->
		</div> <!-- END #column_wrapper -->

		<!-- This is the footer. It will be pushed up and down the page, depending on the height of the columns
		in the main content area -->
		<div id="footer">
			<p>Copyright ©2008 — ACME Inc.</p>
		</div> <!-- END #footer -->

	</div> <!-- END #page_wrapper -->
</body>
</html>

 

As for the swish login form appearing out of thin air: that is produced with some nifty Javascript animation. My advice would be to take a look at a Javascript framework like Mootools instead of trying to make it yourself, at least for the time being.

 

Good luck,

Rob

Thank you VERY much for the help, Rob! I'll begin experimenting with that code right now And thanks to you too, ooyes, I'll have a look and see if I can find more cool Javascript tricks on DynamicDrive.

No worries Rexi, let me know if you have any questions about it!

A brilliant example of what I'm on about is available here: http://www.sky.com/ -- If you go there, and just hit the "Log In" button on the right, you'll see the login box appears out of nowhere and the right hand column increases in height. Meanwhile, the page footer remains stable and moves down the page perfectly.

 

For the Log In Section you can implement the accordian menu script from here

Either that or the Mootools Fx.Slide

Either that or the Mootools Fx.Slide

 

This would be much more easier for you to implement