13 replies [Last post]
sanch3x
Offline
Enthusiast
Last seen: 13 years 2 days ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

Hey guys,

Gary links (or used to link) people to one of his webpages which explained the faux pas cols technique. I have the site bookmarked but it's been down for the past week (or maybe I've just been trying to check it out at bad times) so I was wondering if anyone knew if this problem was going to be solved or if he moved to another server.

This would be appreciated seeing how I understood his method very well.

Thanks.

Seb

"Don't worry about Blank let me worry about Blank"

larmyia
Offline
Elder
London
Last seen: 14 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Gary's faux pas cols

he's having probs with his server...hopefully sorted soon!

larmyia

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Gary's faux pas cols

Hah! It's more than server trouble. My host apparently went out of business without notice.Sad Whois has no IP block for them, DNS does not find them, nor MX (email). So if anyone knows of a free hosting deal with no ads (Portland gave me PHP and MySQL, too), I'm all ears.

Here's the faux (not pasTongue) column code. The image is a simple colored block. It could just as well be a tileable image of the correct width.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"> 
<head> 
  <meta name="generator" content=" 
  HTML Tidy for Linux/x86 (vers 1st August 2004), see www.w3.org" /> 
  <meta name="editor" content="Emacs 21" /> 
  <meta name="author" content="Gary Turner" /> 
  <meta http-equiv="content-type" content=" 
  text/html; charset=us-ascii" /> 
  <link rel="shortcut icon" href="/favicon.ico" /> 
 
  <title>2 Column - Apparent Equal Height</title> 
 
<style type="text/css"> 
/*<![CDATA[*/ 
 
html, body { 
    padding: 0; 
    margin: 0; 
    } 
 
html {height: 100%; padding-bottom: 1px;} 
 
body { 
    font: 100% Tahoma, sans-serif; 
    color: black; 
    background-color: white; 
    text-align: center; /*IE centering hack*/ 
    } 
 
em { 
    font-style: italic; 
    } 
 
p { 
    font-size: 1em; 
    } 
 
h1, h2 { 
    font-family: Tahoma, Helvitica, sans-serif; 
    text-align: center; 
    margin: 0; 
    } 
 
ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    } 
 
li a { 
    display: block; 
    text-align: center; 
    text-decoration: none; 
    } 
 
li a:hover { 
    background-color: silver; 
    text-decoration: underline; 
    } 
 
blockquote { 
    margin: 0 3em; 
    text-align: justify; 
    font: .9em serif; 
    line-height: 1.1em; 
    } 
 
blockquote p { 
    margin-bottom: 0; 
    } 
 
blockquote p:before { 
    content: "\201c"; 
    font-size: 3em; 
    color: #ccc; 
    vertical-align: text-bottom; 
    } 
 
blockquote p.last:after { 
    content: "\201d"; 
    font-size: 3em; 
    color: #ccc; 
    vertical-align: -.75em; 
    } 
 
/*The background image should be the width of 
  the sidebar.  Its purpose is to simulate a 
  column of full height.*/ 
#wrapper { 
    position: relative; 
    width: 750px; 
    margin: 0 auto; /*proper centering*/ 
    text-align: left; /*return to normalcy*/ 
    border: 1px solid #333; 
    background: #eee url(navcolbg.jpg) top left repeat-y; 
    } 
 
#banner { 
    background-color: white; 
    height: 4em; 
    border-bottom: 1px solid #555; 
    position: relative; 
    padding: 1em; 
    } 
 
#sidebar { 
    float: left; 
    width: 160px; 
    padding: 1em 5px 0; 
    border-right: 1px solid #555; 
    } 
 
/* \* 
* html li a { 
    height: 1px; 
    } 
/* */ 
 
#main { 
    margin-left: 170px; /*adjust for overlap with sidebar border*/ 
    border-left: 1px solid #555; 
    padding: 1em; 
    line-height: 1.3em; 
    } 
 
#footer { 
    font-size: 0.8em; 
    text-align: center; 
    margin-top: 0; 
    } 
 
/*** see http://www.positioniseverything.net/easyclearing.html 
   for explanation of Tony Aslett's elegant hack ***/ 
 
.clearing:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
    } 
 
.clearing { 
    display: inline-block; 
    } 
 
/* hides from IE/Mac \*/ 
* html .clearing {  
    height: 1%; 
    } 
 
.clearing { 
    display: block; 
    } 
/* end hide from IE-Mac */ 
/*** end clearing hack ***/ 
 
.def { 
    border-bottom: 1px dotted #666; 
    cursor: help; 
    } 
 
/*]]>*/ 
</style> 
</head> 
 
<body> 
  <div id="wrapper" class="clearing"> 
    <div id="banner"> 
      <h1>2 Column&mdash;Apparent Equal Height</h1> 
    </div><!-- end banner --> 
 
    <div id="sidebar"> 
 
      <h2>Menu</h2> 
 
      <ul> 
        <li><a href="#" onclick="this.blur()">menu item</a></li> 
 
        <li><a href="#" class="out">menu item</a></li> 
 
        <li><a href="#">menu item</a></li> 
 
        <li><a href="#">menu item</a></li> 
      </ul> 
 
      <p>The background image in #wrapper extends the full length of 
      the page. So, it looks like the column is full length.</p> 
    </div><!-- end sidebar --> 
 
    <div id="main"> 
      <h2>Main Content</h2> 
 
      <p>The borders are set to <span class="def" title=" 
      one lies over the other">overlap</span>. If you know which 
      column will always be the longer, you may use only that column's 
      border. If you use color to separate the columns, the background 
      image in #wrapper should be total width of the float column. Like 
      the overlapping borders, this makes it appear that both columns 
      are full length.</p> 
 
      <p>This demo has been modified to include an actual background 
      image. I have also lengthened the content to more clearly 
      show that the navcol <em>seems</em> to extend the full height of 
      the content.</p> 
 
      <blockquote> 
        <p class="last">Aliquam odio wisi, molestie quis, hendrerit non, tempus ut, 
        felis. Sed a augue. Fusce metus justo, faucibus in, sagittis 
        dignissim, porttitor id, risus. Praesent sit amet velit. 
        Aliquam erat volutpat. Pellentesque ut diam. Nam venenatis, 
        metus sed scelerisque semper, tellus libero placerat tellus, 
        vel aliquam risus lorem sed dui. Cras lacus. Nullam venenatis 
        adipiscing neque. Maecenas et metus nec libero vehicula congue. 
        Vestibulum vestibulum odio ullamcorper lacus. Etiam odio eros, 
        aliquet et, volutpat eu, porta laoreet, orci. Donec sodales 
        massa tincidunt est.</p> 
 
      </blockquote> 
    </div><!-- end main --> 
  </div><!-- end wrapper --> 
 
  <p id="footer">Footer Stuff &copy;2005</p> 
</body> 
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sanch3x
Offline
Enthusiast
Last seen: 13 years 2 days ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

Gary's faux pas cols

Thanks, it's appreciated Smile

Seb

"Don't worry about Blank let me worry about Blank"

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 22 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Gary's faux pas cols

Phew I'm glad your stuff will be back Gary - thought it had gone for good. I was searching and searching for that lovely form validation you've got on there - wanted to steal (errr I mean look) at it.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

larmyia
Offline
Elder
London
Last seen: 14 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Gary's faux pas cols

I know what you mean HB. I must have swore at my modem about 100 times before I wondered if it was in fact not a problem my end!

and for the form too!

larmyia

sanch3x
Offline
Enthusiast
Last seen: 13 years 2 days ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

Gary's faux pas cols

Hey guys,

I'm using the clearing classes but the thing is I have two boxes I'm trying to clear to have the faux col. Because of this I can't use the id="wrapper" class="clearing" twice (Seeing how id's have to be unique). However the technique isn't working :S, here's what my code looks like

CSS

#index-wrapper {

	width: 450px;
	margin: 0;
	padding: 0;
	float: auto;
	position: relative;

}

.index-row{
	
	background: url(gui_images/clearingImage.jpg) 0 0 repeat-y;
	width: 450px;
	margin: 0 0 10px 0;
	padding: 0;
	float: left;
	position: relative;
	clear: both;
	
}

.index-leftbox{

	border: 1px solid #600;
	padding: 10px 10px 10px 10px;
	width: 274px;
	float: left;
	position: relative;
	display: box;
	
}

.index-rightbox{

	border: 1px solid #600;
	padding: 10px 10px 10px 10px;
	margin-left: 10px;
	width: 114px;
	float: right;
	position: relative;
	display: box;
	
}

.index-clearing:after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    }

.index-clearing {
    display: inline-block;
    visible: false;
    }
	

HTML

<div id = "index-wrapper">
   <div class="index-row clearing">
      <div class="index-leftbox"></div>
      <div class="index-rightbox"></div>
   </div>

   <div class="index-row clearing">
      <div class="index-leftbox"></div>
      <div class="index-rightbox"></div>
   </div>
</div>

I attached a screenshot. The yellow line is where I want the col to be extended to. But as you can see nothing happens. Any thoughts?

Thanks in advance!

Seb

"Don't worry about Blank let me worry about Blank"

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Gary's faux pas cols

The faux column trickery and the clearing hack don't actually make the columns the same length, they work together to make it seem that both columns are the same length.

Using my demo code, put different background colors on the columns and you will see the true heights of the two boxes. Look, too, at my use of overlapping borders. change the left margin of the main column so that they don't overlap. You will see that each is a different length.

The reason all the trickery is necessary is that IE doesn't support css2. If you only need to support modern browsers (yeah, right), you could make real equi-length columns like this;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      lang="en">
<head>
  <meta name="generator"
        content="
        HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org" />
        
  <meta name="editor"
        content="Emacs 21" />
  <meta name="author"
        content="Gary Turner" />
  <meta http-equiv="content-type"
        content="text/html; charset=utf-8" />

  <title>2 Column, modern</title>
<style type="text/css">
/*<![CDATA[*/

html, body {
    margin: 0;
    padding: 0;
    }

body {
    font: 100% tahoma, sans-serif;
    color: black;
    background-color: white;
    }

p {
    font-size: 1em;
    margin: 1em 10px;
    }

h1, h2 {
    text-align: center;
    }

#wrapper {
    width: 80%;
    max-width: 40em;
    border: 1px solid black;
    margin: 20px auto 0;
    }

#main {
    display: table;
    border-spacing: 10px;
    }

#col1, #col2 {
    display: table-cell;
    border: 1px solid black;
    }

#col1 {
    width: 10em;
    }

/*]]>*/

</style>
</head>

<body>
  <div id="wrapper">
    <h1>2 Columns—Equal Length</h1>

    <h2>For Modern Browsers Only</h2>

    <div id="main">
      <div id="col1">

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
        aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut
        aliquip ex ea commodo consequat. Duis autem vel eum iriure
        dolor in hendrerit in</p>
      </div><!-- end col1 -->

      <div id="col2">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
        sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna
        aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
        nostrud exerci tation ullamcorper suscipit lobortis nisl ut
        aliquip ex ea commodo consequat. Duis autem vel eum iriure
        dolor in hendrerit in</p>
      </div><!-- end col2 -->
    </div><!-- end main -->
  </div><!-- end wrapper -->

</body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sanch3x
Offline
Enthusiast
Last seen: 13 years 2 days ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

Gary's faux pas cols

Thanks Gary,

Although I understand what the technique is meant to simulate. If I'm not mistaken it allows the background of the wrapper to be passed to it's children, right?

I have an image that is 1px high and 450px wide (the size of the wrapper) and the image consists of the left and right border for the right box. But as I mentioned above, the image doesn't actually appear in the right box.

(Maybe your reply was misunderstood so I'll keep working at it but I don't understand why it won't go through.)

Seb

"Don't worry about Blank let me worry about Blank"

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Gary's faux pas cols

Actually, I think I misunderstood you. It's not possible to tell what's happening by looking at the picture. Off hand, I don't think there's anything wrong with the snippet of code you posted. It would be a Good Thing® if you would post a live link, or failing that, a complete minimal test case.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sanch3x
Offline
Enthusiast
Last seen: 13 years 2 days ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

Gary's faux pas cols

Alright...

Well the results/code I've provided are the real thing. Except for the fact that I removed all text from the HTML.

I'm attaching two images. One of them is what I am trying to achieve the second is how I have been trying to achieve it (with the code above).

Seb

"Don't worry about Blank let me worry about Blank"

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 30 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Gary's faux pas cols

I don't see a way to do the bordered boxes as you illustrate without either using style property values that IE doesn't grok or just using a table. Since IE is not likely to support css2 within my lifetime, I'd go with the four celled table in this case. The alternative is to let those right side boxes find their own sizes along side the same level left hand boxes.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

sanch3x
Offline
Enthusiast
Last seen: 13 years 2 days ago
Timezone: GMT-4
Joined: 2005-05-27
Posts: 223
Points: 2

Gary's faux pas cols

Hey,

I've actually tried doing it with tables since I was getting desperate. I'm kind of disapointed to see that I won't be making a complete CSS website but I'm pretty satisfied with the first attempt Smile

Thanks for all the help Gary

Seb

"Don't worry about Blank let me worry about Blank"

larmyia
Offline
Elder
London
Last seen: 14 years 2 weeks ago
London
Timezone: GMT+1
Joined: 2005-01-25
Posts: 1060
Points: 0

Gary's faux pas cols

sanch3x, I know what you mean, but you have to think about doing the best with the tools at your disposal. if you're not happy using tables in that context, change your design.

fwiw if you're content going with that design, and this is the only viable, workable solution, then what can you do? we have to work within the confines of IE unfortunately....

larmyia