Equal Column Height Attempt.Help, No luck.

**topho** · Jun 18, 2006, 21:03

The guide here: http://www.positioniseverything.net/...ut/equalheight

is not working for me. The Overflow:hidden isn't chopping off my extra column height, that is making my two columns equal in heighth.

My code goes like this:

Code:

#Main {
width: 728px;
position: absolute;
background-color: #999999;
left: 30%;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
html,body {
background-color: #8b8b98;
}
#Navi {
position: absolute;
width: 10%;
background-color: #999999;
left: 20%;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#wrapper
{
overflow: hidden;
}

MAIN PAGE BELOW

The usual stuff

<div id="Wrapper">

<div id="Navi">Navigation Bar content that needs to match the Main content area's height.</div>
<div id="Main">Main content area with blog/reviews/etc.</div>

</div>

I think I'm doing it correctly, but when viewed in IE6 and Firefox 1.5, the extra paddin/margin isn't being chopped off by overflow:hidden. The page scrolls on with endless 30,000 high columns. What am I doing wrong? Thx. I don't want to use the faux columns method. I want to use this method, as it seems easier. I also want to stay away from Javascript, as that gets rather messy fast. Just simple CSS, with or without hacks.

I've also tried my hand at Faux Columns....but that didn't work either. My attempt below

Code:


#Main {
width: 728px;
position: absolute;
background-color: #999999;
left: 30%;

}
html,body {
background-color: #8b8b98;
}
#Navi {
position: absolute;
width: 10%;
background:url(Navi_Back.png) repeat-y left;
left: 20%;
}

*Main Page Below*




<div id="Navi">Navigation Bar content that needs to match the Main content area's height.</div>
<div id="Main">Main content area with blog/reviews/etc.</div>

What I want is my short-height Nav Bar to extend and match my main content area in the center. One thing about this site is that it is a long site. @ a vertical resolution of 1200, this page takes scrolling to read. This, I think, plays into my dilemma. Any help or pointers would be vastly appreciated.

**lostseed** · Jun 18, 2006, 21:30

The embarassingly simple secret is to use a vertically tiled background image to create the illusion of colored columns. For SimpleBits, my background image looks something like Figure 2 (proportions changed for demonstration), with a decorative stripey thing on the left, a wide white section for the content column, a 1 pixel border, and a light brown section for the right column’s background followed by the reverse of the left side’s decorative border.

http://www.alistapart.com/articles/fauxcolumns/

**all4nerds** · Jun 18, 2006, 22:56

Hello

Why do you want to use position absolute ?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	
	*{margin:0;padding:0;}
	
	body{background: #8b8b98;}
	
	.wrapper{
	width:728px;
	overflow: hidden;
	margin:0 auto;
	}
	
	.main,.navi{float:left;}
	
	.main{width:628px;background:#ff6600;}

	.navi{width:100px;background:#999999;}
	
	.ex{padding-bottom:32767px;margin-bottom: -32767px;}
	</style>
	<script type="text/javascript">

	</script>
</head>
<body>

<div class="wrapper">

<div class="navi ex">Navigation Bar content that needs <br /><br /><br />to match the Main content area's height.</div>
<div class="main ex">Main content area <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />with blog/reviews/etc.</div>

</div>

</body>
</html>

**topho** · Jun 18, 2006, 23:35

I'm kinda new to CSS, so I started with position absolute. I'm going to research more about CSS Positioning, and give your method a try. Thx

**all4nerds** · Jun 19, 2006, 01:37

Hello

2 column bare 1200 px height

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Basic 2 Column Bare </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	*{margin:0;padding:0;}
	
	body{font-size:75%;background:#a2a2a2;/*padding:2%;*/}
	
	div,p,i{font-size:1em;}
	head+/**/body code,head+/**/body i{font-size:1.1em;}
	
	p span,p code,p a{color:#0000ff;} 
	code b,p i{color:#ff0000;font-weight:normal;} 
	
	* html .he,* html .fo,* html .na,* html .wra{height:1%;}
		
	.wra{
	margin:0 auto;
	background:#b7b7b7;
	}
	
	.he{background:#ff8c00;}
	
	.fo,.na{background:#fbfbfb;}
	
	.l,* html .r,.ll{float:left;}
	
	.w{width:64em;margin-top:.5em;}
	
	.l{width:18em;}
	head+body .r{margin:0 0 0 18em;}
	.ll{background:#d8d8d8;width:100%;}
	
	.fo{margin:0 auto;clear:both;}
	
	.wra h1,.wra p,.fo p{padding:5px;}
	
	/* .l{display:none;}head+body .r{margin:0;} */
	
	.h{height:1200px;}
	</style>
</head>
<body>


<div class="wra w">

<div class="he">
<h1>header</h1>
<p>Basic 2 Column Bare</p>
</div>

<div class="na"><p>nav</p></div>

<div class="l"><p>left<br /><br /><br />end</p></div>

<div class="r">
<div class="ll h">
<p>Content main box must always be the highest.</p>
<p><a href="../../../layouts.htm">back</a></p>
<p>
<code>
<i>main parameter</i><br />
.w{width:<b>64</b>em;margin-top:.5em;}<br />
<a href="2bare100.htm">class .w switched off (100% width)</a><br />
<i>parameter</i><br />
.<b>l</b>,* html .r,.ll{float:<b>left</b>;}<br />
.l{width:<b>18</b>em;}<br />
head+body .r{margin:0 0 0 <b>18</b>em;}<br />
<a href="2bare-r-col.htm">column right</a><br />
</code>
</p>
<p>

<span>
Left right column floating.<br />
No 3px jog, float clearing in Content column.<br />
Content column adjusts to width.<br />
Footer clears float<br />
</span>

</p>
<p>
Main advantage it's logic build up of columns, highly flexible, easy maintenance and extensibility.
</p>
<p>
The relative disadvantage the Content box must always be higher then left or right column.
</p>
<p>start
<!-- 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
-->
end
</p>
</div>
</div>

<div class="fo w"><p>footer</p></div>
</div>

</body>
</html>

**topho** · Jun 19, 2006, 10:12

I guess I'm not quite following. I've had success with the faux columns method now, but I have one quip.

I've got my Nav Bar at 20% left. I then did my repeating background Navi_Back.png at 20% left as well, thinking it would line up. It doesn't line up. Why? I had to use 22% left, and still it hangs out a little bit.

Code:

#Main {
	width: 728px;
	position: absolute;
	background-color: #999999;
	left: 30%;
}
body {
	margin:0;
	padding:0;
	background-color: #8b8b98;
	background-image: url(Navi_Back.png);
	background-repeat: repeat-y;
	background-position: 22% 0;
}
#Navi {
	position: absolute;
	width: 10%;
	background-color: #999999;
	left: 20%;
}

Why use position:absolute....why not? is my question.

Can you guys tell me the methods you were trying to showing me? I could kinda see that one was the positioniseverything method. The other I can't follow.

Why isn't my background tiled image lining up. It's a 200*1 pixel image made in photoshop will paint bucket of #999999. Anybody? I really really do appreciate your guys' help, I'm just kinda new to CSS, and cluttered examples confuse me.

**all4nerds** · Jun 19, 2006, 10:28

Hello

Sorry position absolute is NS 4 , dreamweaver 3 , old time , for faux columns or the PIE model, or whatever model

PS the other way is the PIE way ?

basic faux column

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>12345 12345 12345 12345 12345</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<style type="text/css">
	html,body{height:100%;}
	
	*{margin:0;padding:0;}
	
	body{background:#8b8b98;}
	
	#main{
	width:728px;
	margin:0 auto;
	background:#999999 url(xx.gif) repeat-y
	}
	* html #main{height:100%;}
	head+body #main{min-height:100%;}
	
	#navi{
	float:left;
	width:166px;
	}
	</style>
</head>
<body>

<div id="main">

<div id="navi"><p>12345</p></div>

<p>12345</p>

</div>

</body>
</html>

The SitePoint Forums have moved.

User Tag List

Thread: Equal Column Height Attempt.Help, No luck.

Thread Tools

Display

Equal Column Height Attempt.Help, No luck.

Bookmarks

Bookmarks

Posting Permissions