border problem

**enormousrodent** · Jun 19, 2006 04:22

Hey guys...

here is the link : Website

The problem i have is obvious when viewed in ie and not in firefox...basically the divider bar are miss aligned on i.e. This would not be a problem if it was possible to make the two divs 100% height or something but i dont know how...Any ideas would be great.. (btw please dont suggest using images as i dont want that solution..needs to be easily editable and modified in css

Thanks

rodent

**Shyflower** · Jun 19, 2006 05:01

if you want them to be the same, take out the border-left in your second column and replace it with border-right: double (instead of solid). However, that won't make IE drop to the bottom. IE is really a bugger when it comes to that.

You can also set a min-height using pixels.

I'm not entirely sure either solution will work since css for me is often trial and error.

**enormousrodent** · Jun 19, 2006 05:10

That kind of works...but now there is spacing to the right side....im sure there is a method to make the heights 100%...i just do not know how to do it...i dont want to make my divs too complex, and i dont get it when people do inner divs outer divs etc...all too complex..

Thanks for help

Rodent

**all4nerds** · Jun 19, 2006 05:31

Hello

To many width's set
Don't embrace the boxmodel problem, set padding and margin's on tags in the containers

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>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="xx" />
	<meta name="keywords" content="xxx" />
	<meta name="description" content="xxxx" />
	<meta name="robots" content="all" />
	<title>Yoursite.com</title>
	<style type="text/css" media="all">
	
	*{margin:0;padding:0;}
	
	body{
	font:10pt Verdana, Arial, Helvetica, sans-serif;
	background:#bdc7ce;
	text-align:center;
	color:#353635;
	}

	a:link, a:visited, a:active {
	color:#666;
	font:bold 10pt georgia, verdana, arial, sans-serif;
	}
	a:hover{color:#ff0000;}

	h1{
	font:28pt georgia, verdana, arial, sans-serif;
	color:#fff;
	padding:20px;
	}
	
	 h2{
	font:14pt georgia, verdana, arial, sans-serif;
	letter-spacing: -2px;
	color:#304462;
	border-bottom:1px solid #304462;
	padding-bottom:5px;
	text-align: left;
	}
	h3{
	font-size:10pt;
	letter-spacing: -1px;
	color:#304462;
	padding-bottom: 5px;
	text-align: left;
	font-weight: bold;
	}

	p{
	font: 8pt verdana,sans-serif;
	text-align:justify;
	padding-top:15px;
	}

	#contain {
	margin:50px auto;
	width:700px;
	border:4px solid #fff;
	background:#bdc7ce;
	}

	#header {
	height:117px;
	border-bottom:1px solid #CCC;
	background:#7b88a5;
	}
	
	#spacer{
	border-top:5px solid #bdc7ce;
	height:10px;
	background:#304462;
	overflow:hidden;
	}

	#navbar{
	border-top:5px solid #bdc7ce;
	background:#304462;
	text-align:center;
	font-family:helvetica, arial, verdana, tahoma, sans-serif;
	letter-spacing: -1px;
	font-size: 130%;
	height:30px;
	}

	#leftcol {
	width:129px;
	float:left;
	text-align:left;
	border-right:1px solid #fff;
	}

	#leftcol p{
	padding:10px;
	}
	#leftcol h2,#leftcol h3,#content h2{
	margin:0 10px 0 10px;
	}

	#content{
	float:left;
	margin-left:-1px;
	width:570px;
	border-left:1px solid #fff;
	}

	#content p{
	padding:10px 10px 10px 10px;
	}

	#footer{
	clear:both;
	border-top:1px solid #fff;
	background:#304462;
	}
	* html #footer{height:1%;}

	#footer p {
	text-align:right;
	padding:4px 4px 4px 0;
	font:8pt verdana, arial, sans-serif;
	color: #fff;
	}
	
	#navbar a{
	padding:0px 20px 0px 20px;
	text-decoration: none;
	color:#fff;
	font:10pt verdana, arial, sans-serif;
	border-bottom:4px solid #304462;
	}
	#navbar a:hover{
	color:#ff0000;
	border-bottom:4px solid #ff0000;
	}
	
	</style>
</head>
<body>
<div id="contain">

<div id="header"><h1>www.yoursite.com</h1></div>

<div id="spacer"></div>

<div id="navbar">
			 |<a href="##">Link One</a> |
			<a href="##">Link Two</a> |
			<a href="##">Link Three</a> |
			<a href="##">Link Four</a> |
			<a href="##">Link Five</a> |
</div>
		<div id="leftcol">
				<h2>Header 2</h2>
                <h3>Header 3</h3>
				<p>
                    Quisque ut lectus. Nam dictum lacinia nulla.
                     Nullam suscipit, nibh vitae suscipit condim
                     entum, purus felis lacinia felis, vitae rut
                     rum risus justo quis tortor. Curabitur ultr
                     icies feugiat arcu.
                     <br /><br />
                      Cras laoreet viverra n
                     eque. Praesent viverra commodo nibh. Nulla
                     m dictum placerat orci. Etiam risus mauris
                     , adipiscing eget, dapibus eu, vulputate e
                     t, tortor. Fusce hendrerit sollicitudin er
                     os. Donec metus pede, eleifend sit amet,
					 </p>
 		</div>


		<div id="content">
				<h2>Header 2</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ac magna.
                Mauris tortor turpis, viverra eu, viverra a, consequat eget, ante. Proin eu
                leo. Sed pulvinar nisl sed mi. Vivamus tristique mi et sapien. Quisque at
                nisl. Integer metus erat, elementum quis, eleifend ut, gravida non, lectus.
                Pellentesque quam ipsum, vehicula eget, fringilla in, varius vel, nibh.
                Integer justo. Class aptent taciti sociosqu ad litora torquent per conubia
                nostra, per inceptos hymenaeos. Donec luctus neque et enim. Phasellus
                fermentum erat a quam posuere pellentesque. Donec nibh. Nam nec lacus ut
                tortor vehicula pretium. Vivamus vitae nisl. Fusce congue sodales ipsum.
                Pellentesque elit nisi, placerat a, consequat lacinia, iaculis viverra, tortor.
				</p>

				<p>Phasellus tempor placerat odio. Etiam in mi. Fusce et nisi at quam sodales
                congue. Aenean enim massa, sollicitudin a, gravida sit amet, rhoncus sit amet,
                magna. Vivamus fermentum magna quis turpis. Curabitur feugiat volutpat nibh.
                Donec malesuada, lacus posuere luctus molestie, nibh tellus mollis libero,
                consectetuer hendrerit orci nisi eu elit. Vivamus risus. Integer in dui. Fusce
                et purus in purus rutrum commodo. Fusce id eros.
				</p>


		</div>

		<div id="footer">
			<p>Copyright &copy; Invisible Web Design</p>
		</div>
	</div>
</body>
</html>

**enormousrodent** · Jun 19, 2006 06:35

can i ask what you have done here? just not sure what i did wrong...thx for your help btw!

Rodent

**enormousrodent** · Jun 19, 2006 06:40

what does this do?

* html #footer{height:1%;}

**all4nerds** · Jun 19, 2006 06:45

Hello

the border
a floats 129px +border right 1px
a floats 570px +border left 1px + margin left -1px

and only 3 width's are set
the wrapper
the 2 floats

H2 width 100% + margin = no fit
blocklevel elements in a container (screen) will take full width and need no 100% width, if not floated, and can take padding or margin's

**enormousrodent** · Jun 19, 2006 06:52

Originally Posted by all4nerds

Hello

the border
a floats 129px +border r 1px
a floats 570px +border l 1px + margin left -1px

and only 3 width are set
the wrapper
the 2 floats

H2 width 100% + margin = no fit
blocklevel elements in a container (screen) will take full width and need no 100% width, if not floated, and can take padding or margin's

Highly confused....you may need lamens terms..i have no clue what on earth you just said...."a floats 129px +border r 1px"

lol soz Rodent

**all4nerds** · Jun 19, 2006 06:59

Hello

its your code

float 1
#leftcol {
width:129px;
float:left;
text-align:left;
border-right:1px solid #fff;
}
float 2
#content{
float:left;
margin-left:-1px;
width:570px;
border-left:1px solid #fff;
}

wrapper
#contain {width:700px;

from your style sheet
h2{padding:10px;width: 100%; = 100% + 2x10px = no fit

haslayout for IE see FAQ CSS
* html #footer{height:1%;}

Your model, fits in any width, only 2 width parameters

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>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="xx" />
	<meta name="keywords" content="xxx" />
	<meta name="description" content="xxxx" />
	<meta name="robots" content="all" />
	<title>Yoursite.com</title>
	<style type="text/css" media="all">
	
	*{margin:0;padding:0;}
	
	body{
	font:10pt Verdana, Arial, Helvetica, sans-serif;
	background:#bdc7ce;
	text-align:center;
	color:#353635;
	}

	a:link, a:visited, a:active {
	color:#666;
	font:bold 10pt georgia, verdana, arial, sans-serif;
	}
	a:hover{color:#ff0000;}

	h1{
	font:28pt georgia, verdana, arial, sans-serif;
	color:#fff;
	padding:20px;
	}
	
	 h2{
	font:14pt georgia, verdana, arial, sans-serif;
	letter-spacing: -2px;
	color:#304462;
	border-bottom:1px solid #304462;
	padding-bottom:5px;
	text-align: left;
	}
	h3{
	font-size:10pt;
	letter-spacing: -1px;
	color:#304462;
	padding-bottom: 5px;
	text-align: left;
	font-weight: bold;
	}

	p{
	font: 8pt verdana,sans-serif;
	text-align:justify;
	padding-top:15px;
	}

	#contain{
	border:4px solid #fff;
	background:#bdc7ce;
	}
	* html #contain{height:1%;}
	
	#con tain{
	margin:50px auto;
	width:700px;
	}

	#header{
	height:117px;
	border-bottom:1px solid #CCC;
	background:#7b88a5;
	}
	
	#spacer{
	border-top:5px solid #bdc7ce;
	height:10px;
	background:#304462;
	overflow:hidden;
	}

	#navbar{
	border-top:5px solid #bdc7ce;
	background:#304462;
	text-align:center;
	font-family:helvetica, arial, verdana, tahoma, sans-serif;
	letter-spacing: -1px;
	font-size:130%;
	height:30px;
	}

	#leftcol{
	width:129px;
	float:left;
	text-align:left;
	border-right:1px solid #fff;
	}

	#leftcol p{
	padding:10px;
	}
	#leftcol h2,#leftcol h3,#content h2{
	margin:0 10px 0 10px;
	}

	#content{
	float:left;
	margin-left:-1px;
	width:100%;
	border-left:1px solid #fff;
	}

	#content p{
	padding:10px 10px 10px 10px;
	}

	#footer{
	clear:both;
	border-top:1px solid #fff;
	background:#304462;
	}
	* html #footer{height:1%;}

	#footer p {
	text-align:right;
	padding:4px 4px 4px 0;
	font:8pt verdana, arial, sans-serif;
	color: #fff;
	}
	
	#navbar a{
	padding:0px 20px 0px 20px;
	text-decoration: none;
	color:#fff;
	font:10pt verdana, arial, sans-serif;
	border-bottom:4px solid #304462;
	}
	#navbar a:hover{
	color:#ff0000;
	border-bottom:4px solid #ff0000;
	}
	* html .r{float:left;}
	head+body .r{margin:0 0 0 130px;}
	</style>
</head>
<body>
<div id="contain">

<div id="header"><h1>www.yoursite.com</h1></div>

<div id="spacer"></div>

<div id="navbar">
			 |<a href="##">Link One</a> |
			<a href="##">Link Two</a> |
			<a href="##">Link Three</a> |
			<a href="##">Link Four</a> |
			<a href="##">Link Five</a> |
</div>
		<div id="leftcol">
				<h2>Header 2</h2>
                <h3>Header 3</h3>
				<p>
                    Quisque ut lectus. Nam dictum lacinia nulla.
                     Nullam suscipit, nibh vitae suscipit condim
                     entum, purus felis lacinia felis, vitae rut
                     rum risus justo quis tortor. Curabitur ultr
                     icies feugiat arcu.
                     <br /><br />
                      Cras laoreet viverra n
                     eque. Praesent viverra commodo nibh. Nulla
                     m dictum placerat orci. Etiam risus mauris
                     , adipiscing eget, dapibus eu, vulputate e
                     t, tortor. Fusce hendrerit sollicitudin er
                     os. Donec metus pede, eleifend sit amet,
					 </p>
 		</div>

<div class="r">
		<div id="content">
				<h2>Header 2</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ac magna.
                Mauris tortor turpis, viverra eu, viverra a, consequat eget, ante. Proin eu
                leo. Sed pulvinar nisl sed mi. Vivamus tristique mi et sapien. Quisque at
                nisl. Integer metus erat, elementum quis, eleifend ut, gravida non, lectus.
                Pellentesque quam ipsum, vehicula eget, fringilla in, varius vel, nibh.
                Integer justo. Class aptent taciti sociosqu ad litora torquent per conubia
                nostra, per inceptos hymenaeos. Donec luctus neque et enim. Phasellus
                fermentum erat a quam posuere pellentesque. Donec nibh. Nam nec lacus ut
                tortor vehicula pretium. Vivamus vitae nisl. Fusce congue sodales ipsum.
                Pellentesque elit nisi, placerat a, consequat lacinia, iaculis viverra, tortor.
				</p>

				<p>Phasellus tempor placerat odio. Etiam in mi. Fusce et nisi at quam sodales
                congue. Aenean enim massa, sollicitudin a, gravida sit amet, rhoncus sit amet,
                magna. Vivamus fermentum magna quis turpis. Curabitur feugiat volutpat nibh.
                Donec malesuada, lacus posuere luctus molestie, nibh tellus mollis libero,
                consectetuer hendrerit orci nisi eu elit. Vivamus risus. Integer in dui. Fusce
                et purus in purus rutrum commodo. Fusce id eros.
				</p>


		</div>
</div>		

		<div id="footer">
			<p>Copyright &copy; Invisible Web Design</p>
		</div>
	</div>
</body>
</html>

**enormousrodent** · Jun 19, 2006 08:15

I have another issue now...I have modified to create myself a now 3 column template...link below :
http://www.invisiblewebdesign.co.uk/demo/3column/

As you can see if the right hand column is too short the right bar shortens itself...i know that 3 columns is a whole new kettle of fish but any help would be fabulous.

thanks a bunch

Rodent

**all4nerds** · Jun 19, 2006 08:56

Hello

No, only works when main content container is higher
or set a height min-height on middle box

* html #content{height:500px;}
head+body #content{min-height:500px;}

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" >

<!-- Mirrored from www.invisiblewebdesign.co.uk/demo/3column/ by HTTrack Website Copier/3.x [XR&CO'2006], Mon, 19 Jun 2006 15:50:21 GMT -->
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<meta name="author" content="" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta name="robots" content="all" />
	<title>Yoursite.com</title>
	<style type="text/css" media="all">
		@import url(style/style.css);
		* html #content{height:500px;}
		head+body #content{min-height:500px;}
	</style>
</head>
<body>
	<div id="contain">
		<div id="header">
        	<h1>www.yoursite.com</h1>
		</div>
		<div id="spacer">

		</div>
		<div id="navbar">
			 |<a href="#">Link One</a> |
			<a href="#">Link Two</a> |
			<a href="#">Link Three</a> |
			<a href="#">Link Four</a> |
			<a href="#">Link Five</a> |
		</div>
		<div id="leftcol">
				<h2>Header 2</h2>
                <h3>Header 3</h3>
                <p>Quisque ut lectus. Nam dictum lacinia nulla.
                Nullam suscipit, nibh vitae suscipit condim
                entum, purus felis lacinia felis, vitae rut
                rum risus justo quis tortor. Curabitur ultr
                icies feugiat arcu.
                <br /><br />
                Cras laoreet viverra n
                eque. Praesent viverra commodo nibh. Nulla
                m dictum placerat orci. Etiam risus mauris
                , adipiscing eget, dapibus eu, vulputate e
                t, tortor. Fusce hendrerit sollicitudin er
                os. Donec metus pede, eleifend sit amet,</p>
 		</div>


		<div id="content">
				<h2>Header 2</h2>
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ac magna.
                Mauris tortor turpis, viverra eu, viverra a, consequat eget, ante. Proin eu
                leo. Sed pulvinar nisl sed mi. Vivamus tristique mi et sapien. Quisque at
                nisl. Integer metus erat, elementum quis, eleifend ut, gravida non, lectus.
                Pellentesque quam ipsum, vehicula eget, fringilla in, varius vel, nibh.
                Integer justo. Class aptent taciti sociosqu ad litora torquent per conubia
                nostra, per inceptos hymenaeos. Donec luctus neque et enim. Phasellus
                fermentum erat a quam posuere pellentesque. Donec nibh. Nam nec lacus ut
                tortor vehicula pretium. Vivamus vitae nisl. Fusce congue sodales ipsum.
                Pellentesque elit nisi, placerat a, consequat lacinia, iaculis viverra, tortor.
				</p>

				<p>Phasellus tempor placerat odio. Etiam in mi. Fusce et nisi at quam sodales
                congue. Aenean enim massa, sollicitudin a, gravida sit amet, rhoncus sit amet,
                magna. Vivamus fermentum magna quis turpis. Curabitur feugiat volutpat nibh.
                Donec malesuada, lacus posuere luctus molestie, nibh tellus mollis libero,
                consectetuer hendrerit orci nisi eu elit. Vivamus risus. Integer in dui. Fusce
                et purus in purus rutrum commodo. Fusce id eros.
				</p>
								<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer ac magna.
                Mauris tortor turpis, viverra eu, viverra a, consequat eget, ante. Proin eu
                leo. Sed pulvinar nisl sed mi. Vivamus tristique mi et sapien. Quisque at
                nisl. Integer metus erat, elementum quis, eleifend ut, gravida non, lectus.
                Pellentesque quam ipsum, vehicula eget, fringilla in, varius vel, nibh.
                Integer justo. Class aptent taciti sociosqu ad litora torquent per conubia
                nostra, per inceptos hymenaeos. Donec luctus neque et enim. Phasellus
                fermentum erat a quam posuere pellentesque. Donec nibh. Nam nec lacus ut
                tortor vehicula pretium. Vivamus vitae nisl. Fusce congue sodales ipsum.
                Pellentesque elit nisi, placerat a, consequat lacinia, iaculis viverra, tortor.
				</p>

				<p>Phasellus tempor placerat odio. Etiam in mi. Fusce et nisi at quam sodales
                congue. Aenean enim massa, sollicitudin a, gravida sit amet, rhoncus sit amet,
                magna. Vivamus fermentum magna quis turpis. Curabitur feugiat volutpat nibh.
                Donec malesuada, lacus posuere luctus molestie, nibh tellus mollis libero,
                consectetuer hendrerit orci nisi eu elit. Vivamus risus. Integer in dui. Fusce
                et purus in purus rutrum commodo. Fusce id eros.
				</p>
		</div>

		<div id="rightcol">
				<h2>Header 2</h2>
                <h3>Header 3</h3>
                <p>Quisque ut lectus. Nam dictum lacinia nulla.
                Nullam suscipit, nibh vitae suscipit condim
                entum, purus felis lacinia felis, vitae rut
                rum risus justo quis tortor. Curabitur ultr
                icies feugiat arcu.
</p>
 		</div>

		<div id="footer">
			<p>Copyright &copy; Invisible Web Design</p>
		</div>

	</div>
    <div id="footer-nav">
    		 |<a href="#">Link One</a> |
			<a href="#">Link Two</a> |
			<a href="#">Link Three</a> |
			<a href="#">Link Four</a> |
			<a href="#">Link Five</a> |<br />
	</div>

</body>
</html>

this is the closed you need, a 3 wrapper negativ margin model, see also Paul's website he has lots more of them

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>12345 12345 12345 12345 12345</title>
	<style type="text/css">
	
	* {margin:0;padding:0}
	
	body{font-size:75%;background:#a2a2a2;}
	
	body i{color:#909090;}
	
	div{font-size:1em;}
	
	head+/**/body .fc:after {
	content:"."; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden;
	}
	/* \*/
	* html .fc{height:1%;}
	*+html .fc{display:inline-block;}
	/*  */
	
	.wra{background:#909090;}
	
	.wra,.fo{border:1px solid #000000;}
	
	.w{width:64em;margin:.5em auto 0 auto;}
	.wx{width:90%;}
	
	.he{background:#ff8c00;border-bottom:1px solid #000000;}
	
	.na,.fo{background:#fbfbfb;}
	
	.bo{border-bottom:1px solid #000000;}
	
	.aur{background:#d8d8d8;border-right:1px solid #000000;}
	
	.aul{background:#b7b7b7;border-left:1px solid #000000;}
	
	.aur{margin:0 18em 0 0;}
	.aul{margin:0 0 0 18em;}
	.l,.ll{position:relative;width:18.01em;}
	.l{margin:0 0 0 -18em;float:left;/*left:-100%;*/}
	.ll{margin:0 -18em 0 0;float:right;}
	
	.r{width:100%;float:left;}
	head+/**/body .r{width:99.9%;}
	
	.fo{border-top:none;margin:0 auto;}
	
	.wra h1,.wra p,.fo p{padding:5px;}
	
	.wra a:hover{padding:0 0 15em 0;display:block;}
	</style>
</head>
<body>
<div class="wra w">

<div class="he bo">
<h1>header</h1>
<p>Basic 3 Column Bare</p>
</div>
<div class="na bo">
<p>navigation</p>
</div>

<div class="aur">
<div class="aul fc">

<div class="l">
<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 />
 -->
end
</p>
</div>

<div class="r">
<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 />
 -->
end
</p>
</div>

<div class="ll">
<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 />
 -->
end
</p>
</div>

</div>
</div>

</div>

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

<p><i>&nbsp;&copy; b. bakker</i></p>

</body>
</html>

PS if you want a 100% hight model , you still need other code

**Shyflower** · Jun 19, 2006 21:27

If you need more help, look at Paul O'B's layout models here: http://www.pmob.co.uk/temp/3colfixedtest_4.htm

or find more information about them in the sticky at the top of this forum:
http://www.sitepoint.com/forums/showthread.php?t=143801

**enormousrodent** · Jun 20, 2006 00:45

PHP 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>12345 12345 12345 12345 12345</title>

    <style type="text/css">

    

    * {margin:0;padding:0}

    

    body{font-size:75%;background:#a2a2a2;}

    

    body i{color:#909090;}

    

    div{font-size:1em;}

    

    head+/**/body .fc:after {

    content:"."; 

    display:block; 

    height:0; 

    clear:both; 

    visibility:hidden;

    }

    /* \*/

    * html .fc{height:1%;}

    *+html .fc{display:inline-block;}

    /*  */

    

    .wra{background:#909090;}

    

    .wra,.fo{border:1px solid #000000;}

    

    .w{width:64em;margin:.5em auto 0 auto;}

    .wx{width:90%;}

    

    .he{background:#ff8c00;border-bottom:1px solid #000000;}

    

    .na,.fo{background:#fbfbfb;}

    

    .bo{border-bottom:1px solid #000000;}

    

    .aur{background:#d8d8d8;border-right:1px solid #000000;}

    

    .aul{background:#b7b7b7;border-left:1px solid #000000;}

    

    .aur{margin:0 18em 0 0;}

    .aul{margin:0 0 0 18em;}

    .l,.ll{position:relative;width:18.01em;}

    .l{margin:0 0 0 -18em;float:left;/*left:-100%;*/}

    .ll{margin:0 -18em 0 0;float:right;}

    

    .r{width:100%;float:left;}

    head+/**/body .r{width:99.9%;}

    

    .fo{border-top:none;margin:0 auto;}

    

    .wra h1,.wra p,.fo p{padding:5px;}

    

    .wra a:hover{padding:0 0 15em 0;display:block;}

    </style>

</head>

<body>

<div class="wra w">



<div class="he bo">

<h1>header</h1>

<p>Basic 3 Column Bare</p>

</div>

<div class="na bo">

<p>navigation</p>

</div>



<div class="aur">

<div class="aul fc">



<div class="l">

<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 />

 -->

end

</p>

</div>



<div class="r">

<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 />

 -->

end

</p>

</div>



<div class="ll">

<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 />

 -->

end

</p>

</div>



</div>

</div>



</div>



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



<p><i>&nbsp;&copy; b. bakker</i></p>



</body>

</html>

The above version has a very strange css format...can someone give me a hand it making it more user friendly with names, im trying to figure it out but it always screws up. why they use such crap abbriviations is beyond me.

Rodent thx btw

**all4nerds** · Jun 20, 2006 00:53

Hello

thanks a lot

wra wrapper
he header
l left column
ll right column

r margin FF/ float IE
fo footer
na navigation
aur an autowith with margin right
aul an autowidth with margin left
w main width
fc float clearing
bo border

PS names do nothing whats in the brackets that counts

I can also use Dutch

wra = wrapper = houder

**enormousrodent** · Jun 20, 2006 01:04

The thing is that i have changed the naming, but the css that is used seems overlapping and not in an easy to understand manner...would it be to rude of me to ask if you could assist in changing the naming for me...i will miss somethign and prob screw it up...

<div class="aur">
<div class="aul fc">
I know you said the above two are autowidth margin right but can you explain their purpose please...

Thanks a bunch for helping me...been trying to get templates sorted for ages :P

Rodent

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

Hello

A single column with 3 floats in it
2 extra wrappers for the bgr colors, left column, right column
1 wrapper has a margin left as wide as the left float
1 wrapper has a margin right as wide as the right float
The floats are drawn in place by a negative left / right margin, (as wide) as the l/r floats

The third float is 100% wide so that is adjusts to the main width class w (change w in wx and the model adjust to full screen)

**enormousrodent** · Jun 20, 2006 01:42

Oh i see...so the two wrappers with the left and right margins actually keep the central div in place, where the divs containing the text are positioned above the wrappers. Then the central div is "Squashed" to fit inbetween. Would you say that the jist of it..if so thanks for explaning well...

**all4nerds** · Jun 20, 2006 01:46

Hello

Yes the nagative margins make room for the content box

**enormousrodent** · Jun 20, 2006 01:48

Why did you have a seperate css tag for the width of the wrapper...why did you no just use it with the one style? is there a good reason for splitting those things up??

I keep forgetting to ask questions...this is final one.. (i hope) why do you use 64em for width rather than a specific pixel width?? what is the em?

**all4nerds** · Jun 20, 2006 01:57

Hello

the w width is a parameter, simply ad .w {width:80%;} or width:84em at the end of the sheet and see what happens or use the class .wx (set it to .w)

if you program the parameters out you can very ezy control models

in this model the parameters are

.l .ll .w and the margins of .r .aul .aur

this + class w controls the model
.aur{margin:0 18em 0 0;}
.aul{margin:0 0 0 18em;}
.l,.ll{position:relative;width:18.01em;}
.l{margin:0 0 0 -18em;float:left;/*left:-100%;*/}
.ll{margin:0 -18em 0 0;float:right;}

PS em scale if browser text size is changed
why 64em (32 16 8 4 2 1)
standard font size is 16px 75% = 12px=div=1em
64em = 64x12=768px

**enormousrodent** · Jun 20, 2006 02:36

Never Mind...Fixed It...Thank mate for everything...ill be recommending ur help for anything...cheers

Rodent

**all4nerds** · Jun 20, 2006 03:13

Hello

.left_column h2,.left_column h3,.right_column h2,.right_column h3,.r h2{
margin:0 10px 0 10px;
}

.left_column p,.right_column p,.r p{
padding:10px 10px 10px 10px;
}

left_column use left-column
selectors should begin with a letter and contain only letters (A-Z, a-z), numbers (0-9), and the hyphen character (-). The CSS2 specification allows more (such as escaped characters) but these are not recommended due to style and compatibility reasons.

if you are not using em's leave this out div{font-size:1em;}

use pixel px not pt

User Tag List

Thread: border problem

Thread Tools

Display

border problem

Bookmarks

Bookmarks

Posting Permissions