Forums

ikthius

Regarding the recent post in Chris' blog about Absolute Columns http://css-tricks.com/links-of-interest-60/ I noticed that this seemed, on the surface, really good.

However, after using the code and then testing others this only seems to work when the right hand column is the one that is absolute to grow.

OK I thought, what if I just change the code so that the left grows if more info is in the right column, so changing the relevant code, it does not work.

so going back to basics I tried everything to get the left hand side as a navigation sidebar that grows if there is more content in the right hand side, but no matter what I try this cannot be done the way the tutorial is suggesting other than the way they suggest.

I tried absolute positioning for both, left or right, it goes haywire. Relative for all, it does not work.

so really not sure if I was using the code right, but trying everything I could think of, this seems to be eluding me.

has anyone else tried this and got it to work?

iopet

Find the "/* EXAMPLE STYLES */" heading, replace with:

/* EXAMPLE STYLES */
#container {position:relative}
#column-right {float:right;	width:480px}
#column-left {position:absolute;	top:10px;	bottom:10px;	left:10px;	width:250px;	overflow:auto}
div.clear-right {clear:right;	margin:0;	padding:0}

Then add:

<div class=\"clear-right\"></div>

before

</div><!-- end container -->

ikthius

cheers Iopet, I will try this over the next few days

ikthius

I noticed that this piece of code works better for some reason.

<br clear=\"all\">

iopet

How does it work better? The 'clear' attribute is deprecated, by the way

iopet

I'd not taken a look in IE7, and it looks like it needs the "zoom: 1" declaration too, so change

<!--[if lt IE 7]>

to

<!--[if lte IE 7]>

and it should work. I've sorted some other code as well, so here's the whole document, valid and sans the unnecessary garbage:

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

<html>

<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">
<title>24ways - 2008 - Absolute Columns - Example 4</title>

<style type=\"text/css\">
* {margin:0;	padding:0;	border:0;	font-size:1em}

html {background:#fff}
body {
	font-family:\"Helvetica Neue\",Helvetica,Arial,sans-serif;
	font-size:12px;
	color:#aaa
}

div {padding:10px}
div div {background:#e6e6e6;	margin-bottom:10px}
div div div {background:#dadada}

#wrapper {
	width:800px;
	margin:10px auto;
	background:#f2f2f2;
}
#header {height:60px;	line-height: 60px}
#footer {
	height:30px;
	margin:0;
	line-height:30px
}
#container {zoom:1}
#container div {margin:0}

h2 {
	font-weight:700;
	text-align:center;
	text-transform:uppercase
}
p {padding-top:10px;	line-height:1.2}

/* EXAMPLE STYLES */
#container {position:relative}
#column-left {
	position:absolute;
	top:10px;
	bottom:10px;
	width:250px;
	overflow:auto
}
#column-right {float:right;	width:480px}
div.clear {
	clear:both;
	margin:0;
	padding:0
}
</style>
</head>

<body>
	<div id=\"wrapper\">
		<div id=\"header\">
			<h2>#header</h2>
		</div><!-- end header -->

		<div id=\"container\">
			<div id=\"column-left\">
				<h2>#left</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div><!-- end column-left -->
			<div id=\"column-right\">
				<h2>#right</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div><!-- end column-right -->
		<div class=\"clear\"></div></div><!-- end container -->
        
		<div id=\"footer\">
			<h2>#footer</h2>
		</div><!-- end footer -->
	</div><!-- end wrapper -->
</body>

</html>