SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Equal Column Height Attempt.Help, No luck.

    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.

  2. #2
    Non-Member lostseed's Avatar
    Join Date
    Sep 2005
    Location
    Zurconion Soon!
    Posts
    1,549
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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/

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  4. #4
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  6. #6
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by all4nerds; Jun 19, 2006 at 10:07.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •