Elastic Equal coloumns pmob

**znebojsa** · Sep 22, 2007 18:08

Hi there.

I am using pmob's 2 coloumn equal coloumns (which is has a fixed left col and fluid right) example to try and make it elastic (using ems)

His example is basically this:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#wrapper
{
background:#809900;
}

#nav
{
width:220px;
float:left;
margin-left:-219px;/* 1px less because of older mozilla*/
position:relative;/* keep it visible*/
left:-1px;/* line it up exactly*/
}

#content{ margin-left:220px;background:#ffffcc;}
.innerfix{width:100%;margin-right:-1px;float:left;position:relative;}

.clearfix:after {
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden;
}
.clearfix {display:inline-block;}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
</style>
</body>

<head>
<div id="outerx3" class="clearfix">
	<div id="mainx3" class="clearfix">
		<div class="innerfix">
			<div id="lcolx3">
				<ul>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
					<li><a href="#">Link</a></li>
				</ul>

			</div>
			<p>This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content
							: This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content:</p>
		</div>
	</div>
</div>

So im not exactly sure how to go about making it elastic. When I tried it broke the layout. Any help is appreciated.

Thanks

**all4nerds** · Sep 22, 2007 21:56

Hello

? what did you do with the code ?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>12345 12345 12345 12345 12345</title>
<style type="text/css">
<!--  -->
*{padding:0;margin:0;}

body{
font-size:75&#37;;
font-family:Verdana,Georgia,"Lucida Sans Unicode",sans-serif;
}

.wx{width:64em;}

div{font-size:1em;}

ul,p{padding:5px;}

#outerx3{
background:#809900;
overflow:hidden;
margin:0 auto;
}

#mainx3{margin-left:18em;background:#ffffcc;}

#lcolx3{
width:18em;
float:left;
margin-left:-17.9em;/* 1px less because of older mozilla*/
position:relative;/* keep it visible*/
left:-.1em;/* line it up exactly*/
}

.innerfix{overflow:auto;}
* html #innerfix{float:left;}
* html #innerfix p{height:1%;}

.clearfix:after {
content:"."; 
display:block; 
height:0; 
clear:both; 
visibility:hidden;
}
.clearfix{display:inline-block;}
/* mac hide \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide */
 -->
</style>
</head>
<body>

<div id="outerx3" class="w">
<div id="mainx3" class="clearfix">

<div id="lcolx3">
<ul>
<li><a href="##">Link a</a></li>
<li><a href="##">Link b</a></li>
<li><a href="##">Link c</a></li>
<li><a href="##">Link d</a></li>
<li><a href="##">Link e</a></li>
<li><a href="##">Link f</a></li>
</ul>

<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 /><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 class="innerfix">

<p>This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content
: This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content : This is the main content:
</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 /><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>


</body>
</html>

**znebojsa** · Sep 22, 2007 22:02

I tried changing the 2 things that say 220px and 1 thing that says 219px to 10em

Thanks for the response i will try it out in a second

**znebojsa** · Sep 22, 2007 22:41

Ok thank you, it worked, previously i didnt have the .1em thing, as i though it was only needed for pixels.

There is still a couple of small issues i would like to have cleared up.

Please take a look here: http://neb.enterdesign.com.au/

1. The text in <code> is bigger in IE and Opera than in FF. How can i make it the same in all browsers?

2. Not so important but, in IE5 (fine in 5.5) the text in #nav seems to have a larger line-height.

Thanks!

**all4nerds** · Sep 22, 2007 22:56

Hello

1 Yes , if this is bothering you , use filters to get the proper size in each browser

2 Not in my IE5 ( my example from above ), debug it on haslayout for UL LI A ( * html .nav li{height:1%;} )

PS this is nonsense code ( add borders and get troubles )
.innerfix{width:100%;margin-right:-1px;float:left;position:relative;}

use
.innerfix{overflow:auto;}
* html #innerfix{float:left;}
* html #innerfix p{height:1%;}

**znebojsa** · Sep 22, 2007 22:58

1. Sorry, what do you mean by filters? I dont understand why it is happening.

nonesense code, hey? thats from pmob's example of equalising coloumns

**all4nerds** · Sep 22, 2007 23:35

Hello

Filters at your own risk

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 .wr {background:#ffff00;} /* IE4 */
	
	head+/* */body .wrg{background:#ffff00;} /* FF */
	
	html:first-child>body .wrf{background:#ffffcc;} /* OP Cascades, last in css sheet */
	

	</style>
	<!--[if IE]>
	<style type="text/css">
	* html + body .wra {background:#ffff00;} /* IE5 */
	* html *body .wrb {background:#ffff00;} /* IE5 */
	* html .wrc{background=#ffff00!;} /* IE5.5 */
	@media all{ * html b\ody .wrd {background:#ffff00;} /* IE 6 */
	*:first-child+html .wre{background:#ffff00;} /* IE 7 */
	
	</style>
	<![endif]-->
</head>
<body>
<div class="wr">IE 4</div>
<div class="wra">IE 5</div>
<div class="wrb">IE 5</div>
<div class="wrc">IE 5.5</div>
<div class="wrd">IE 6</div>
<div class="wre">IE 7</div>
<div class="wrf">OP</div>
<div class="wrg">FF NS Moz OP</div>
<p><br /><br /></p>
<div class="wr wra wrb wrc wrd wre wrf wrg">Check</div>
</body>
</html>

width:100%;margin-right:-1px; this drags the content box to the right, as far as the 1px ? hook to get the columns equalize
You use em's
The model can be cranked up with borders, and even be 100% high, but not with that code

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>equal columns</title>
	<style type="text/css">
	*{margin:0;padding:0;}
	
	html,body{height:100%;}
	
	p,h1,h2{padding:0px;font-size:1em;}
	
	body{
	background:#a2a2a2;
	text-align:center;
	font-size:75%;
	font-family:Verdana, Arial, Geneva, Helvetica, sans-serif;
	}
	
	div{text-align:left;}

	.w{margin:0px auto;}
	.w{width:64em;}
	.wx{width:80%;}
	
	.wra,.he,.na,* html .ar,.la,* html .al,.lla,.fo{border-color:#0000ff;border-style:solid;}
	.wra,.ar,.he,.na,.l,.ll{position:relative;}
	
	.wra{
	background:#d8d8d8;
	border-width:0 1em;
	margin-top:-5em;
	}
	head+body .wra{min-height:100%;background:#c6c6c6;}
	
	.ar{margin-right:16em;z-index:1;}
	.al{margin-left:16em;/* z-index:2;*/}
	
	.he{
	background:#ff8c00;
	height:7em;
	border-width:6em 0 1em 0;
	}
	
	.l,.ll,.la,.lla{width:16em;}
	.l{margin-left:-15.9em;float:left;left:-.1em;/*  */}
	.ll{margin-right:-15.9em;float:right;left:.1em;/*  */}
	
	head+body .la,head+body .lla{position:absolute;top:0;bottom:0;}
	head+body .la{left:0;background:#b4b4b4;border-width:0 1em 0 0;}
	head+body .lla{right:0;background:#d8d8d8;border-width:0 0 0 1em;}
	
	.l,.ll,.q{/* text-align:right; */}
	head+body .q{overflow:hidden;padding:0 1em;}

	.fo,.na{background:#fbfbfb;height:3em;}
	
	.fo{border-width:1em;}
	
	.he,.na{margin:0 -16em;}

	.na{border-width:0 0 1em 0;}
	
	head+/* */body .fc:after{ 
	content:".";
	display:block;
	height:0px;
	clear:both;
	visibility:hidden;
	}
	
	h2{clear:both;}
	/*  */
	html body .la,* html body .ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;}
	html body .lla,* html body .wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;}
	head+body .wra{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) 16em 100% no-repeat;}
	* html body .al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;}
	
	/* hide left col
	.l,.la{display:none;}html .al{margin-left:0;border-left:none;}html body .he,html body .na{margin-left:0;}head+body .q{overflow:auto;padding:0 1em 0 0;}
	 */
	/* hide right col */
	.ll,.lla{display:none;}html .ar{margin-right:0;border-right:none;}html body .he,html body .na{margin-right:0;}head+body .q{overflow:auto;padding:0 0 0 1em;}

	</style>
	<!--[if IE]>
	<style type="text/css">
	* html .wra,* html body .al, * html body .ar{height:100%;}
	
	* html .ar{border-width:0 1em 0 0;background:#b4b4b4;}
	* html .al{border-width:0 0 0 1em;background:#c6c6c6;}
	
	* html .he,* html .na{margin:0 -17em;/*  */}
	
	* html .l{left:-1.1em;/*  */}
	* html .ll{left:1.1em;/*  */}
	
	* html .la,* html .lla{display:none;}
	
	* html .q{float:left;}
	* html .q h2{height:1%;}
	
	* html .fc,* html p{height:1%;} /* IE 5 5.5 6 haslayout */
	*:first-child+html .fc{zoom:1;} /* IE 7 haslayout */
	* html .la,* html .lla{display:none;}
	</style>
	<![endif]-->
</head>
<body>

<div class="wra w">

<div class="ar">
<div class="al fc">

<div class="he"><h1>header</h1></div>

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

<div class="l">
<p>L Start Start 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 /><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 /><br /><br /><br />
 -->
End</p>
</div>

<div class="ll">
<p>R Start Start 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 /><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 /><br /><br /><br />
 -->
End</p>
</div>

<div class="q">
<h2>content</h2>
<p>C Start Start 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 /><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 /><br /><br /><br />
 -->
End</p>
</div>

</div>
</div>

<span class="la"></span>
<span class="lla"></span>

</div>

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

</body>
</html>

**znebojsa** · Sep 23, 2007 00:07

Sorry I dont think you understood what i originally said...
I said if you look at http://neb.enterdesign.com.au/ the font size in the <code> element is different sizes in different browsers. (bigger in IE and opera and smaller in firefox) The text on the rest of the page is however fine.

**all4nerds** · Sep 23, 2007 00:16

Hello

Yes use the filters for the code Tag ?

(IE 7 filter) code{font-size:1em;}
(FF filter) code{font-size:1em;}
(OP filter) code{font-size:1em;}
etc

PS Australia, down under, hmmmm must be because you are always hanging upside down

**znebojsa** · Sep 23, 2007 00:19

Ok I see what you are saying. But i dont know why they are different sizes in the first place :S

PS. Something about Netherlands goes here

**all4nerds** · Sep 23, 2007 00:25

Hello

Code tags indeed are very different in size cross browser, why ? , maybe somebody else knows the answer to it

**znebojsa** · Sep 23, 2007 00:35

maybe i should use <pre> instead? ill try it out now and see what happens. Sitepoint uses <pre> and they are the same size in each browser

**znebojsa** · Sep 23, 2007 00:39

no luck, same thing.

User Tag List

Thread: Elastic Equal coloumns pmob

Thread Tools

Display

Elastic Equal coloumns pmob

Bookmarks

Bookmarks

Posting Permissions