SitePoint Sponsor |
|
User Tag List
Results 1 to 13 of 13
Thread: "Matching" Columns
-
Sep 10, 2007, 09:59 #1
- Join Date
- Jun 2007
- Location
- Ohio
- Posts
- 54
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
"Matching" Columns
Hello,
I was wondering if anyone could help me figure out how to achieve this effect. First, the site I'm working on is ju li edawn dot net (please remove spaces). For example, click on "Writing" (which is the actual blog -- this whole site is using Wordpress). Looking at the bottoms of the columns, I want them to be even all the way across. I tried to accomplish this using this matching columns script. But it's not working. I'm wondering if it's because these boxes are absolutely positioned. I have the problem on every page of the site.
Do you know of another way to make them match? I thought of using an image, but I honestly don't know how to do it that way. I'll appreciate any ideas.Susan
Auxano Creative (formerly The WebDesign Loft)
-
Sep 10, 2007, 15:50 #2
- Join Date
- Sep 2006
- Location
- San Diego
- Posts
- 116
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Maybe try Faux Columns?
When I need two or more columns to be of equal length, I usually use the faux columns technique. I could go into a long description of what that is, but A List Apart already has and did it better than I could.
Furthermore, for a multi column layout, I wouldn't suggest you use absolute positioning, you can get the same effect by floating the two columns within their parent element.Last edited by rhlowe; Sep 10, 2007 at 15:52. Reason: addition
San Diego Freelance Web Development Contractor
Great Taste, no Filler. Now with no Trans Fat!
-
Sep 10, 2007, 16:40 #3
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Here you go. A good friend of mine wrote it, and I'm going to talk him into including it in one of my sites as a full blown article once the site goes live (go to my signature and look for the bottom middle link if you want to know which site I'm talking -- note: this is worded as of 10 September 2007 and will not be applicable when the site launches).
http://battletech.hopto.org/html_tut.../template.htmlSave the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 10, 2007, 18:06 #4
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
I agree with rhlowe, faux columns are the best / simplest method to use for equalising columns.
Dan, that's an interesting method to use - I don't find it terribly useful though.
Off Topic:
An element with no texture is as plain as a rice patty - With images you can get your spicy beef patties.
-
Sep 10, 2007, 18:38 #5
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm not saying you can't use background images, just that you will still the appearance of equal height columns doing what Jason advised if you don't (or if someone turns off the images in their browser).
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 10, 2007, 19:02 #6
- Join Date
- Jun 2007
- Location
- Ohio
- Posts
- 54
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for your input, everyone!
Would the faux column technique work on my layout since the columns that need to be even don't have the same top margin? The right sidebar on my design is actually broken up into smaller boxes that all have different colors. I'm not sure how to apply this.Susan
Auxano Creative (formerly The WebDesign Loft)
-
Sep 10, 2007, 19:06 #7
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It can, it just depends on what color you want the base column background to be (to clearly identify it and separate it from the main content).
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 10, 2007, 19:10 #8
- Join Date
- Jun 2007
- Location
- Ohio
- Posts
- 54
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Okay, I will have to experiment with this. I'll be in touch! Thanks!!
Susan
Auxano Creative (formerly The WebDesign Loft)
-
Sep 11, 2007, 09:52 #9
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
Something completely new ?
Equal high (1) 2 3 columns, left center, right center, any width, with borders
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:5px;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;} .wx{width:64em;} .wx{width:80%;} .wra,.au,.he,.na,.l,.ll{position:relative;} .wra{ background:#d8d8d8; border-left:1px solid #000000; border-right:1px solid #000000; margin-top:-3.2em; } head+body .wra{min-height:100%;background:#c6c6c6;} .he{ background:#ff8c00; /*z-index:2;*/ height:7em; border-top:3.25em solid #000000; } .fo,.na{ background:#fbfbfb; height:3em; } .fo{border:1px solid #000000;} .na,.he{ margin:0 -16.1em; border-bottom:1px solid #000000; } .au{ margin-right:16em; background:#b4b4b4; border-right:1px solid #000000; z-index:2; } .aub{ background:#c6c6c6; margin-left:16em; border-left:1px solid #000000; /*z-index:2;*/ } .q{ width:100%; float:left; margin:0 -1px; } .l,.ll,.la,.lla{width:16em;} .l,.ll{/*z-index:2;*/} .l{ margin-left:-16em; left:-1px; float:left; } .ll{ margin-right:-16em; left:1px; float:right; } .la,.lla{position:absolute;top:0;z-index:1;bottom:0;} .la{ left:0; background:#b4b4b4; border-right:1px solid #000000; } .lla{ right:0; background:#d8d8d8; border-left:1px solid #000000; } head+/* */body .fc:after{ /* min-height browser but not IE 7 */ content:"."; display:block; height:0px; clear:both; visibility:hidden; } /* hide left col .l,.la{display:none;}.aub{margin-left:0;border-left:none;}.he,.na{margin-left:0;} */ /* hide right col .ll,.lla{display:none;}.au{margin-right:0;border-right:none;}.he,.na{margin-right:0;} */ </style> <!--[if IE]> <style type="text/css"> * html .wra,* html body .au, * html body .aub, * html body .la, * html body .lla{height:100%;} * html .fc,* html p{height:1%;} /* IE 5 5.5 6 haslayout */ *:first-child+html .fc{zoom:1;} /* IE 7 haslayout */ </style> <![endif]--> </head> <body> <div class="wra w"> <div class="au"> <div class="aub 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> <div class="la"></div> <div class="lla"></div> </div> <div class="fo w"><p>footer</p></div> </body> </html>
Last edited by all4nerds; Sep 12, 2007 at 01:19.
-
Sep 11, 2007, 10:27 #10
- Join Date
- Jun 2007
- Location
- Ohio
- Posts
- 54
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
It's new to me.
I applied the faux column technique last evening to another site I'm working on and it worked perfectly!! Now I just need to figure out this site. What's really throwing me off is the fact that these boxes don't have equal top margins. I just don't get how to do it. I will keep trying though!!Susan
Auxano Creative (formerly The WebDesign Loft)
-
Sep 11, 2007, 16:25 #11
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
Hi Susan,
If you have a wrapper element, an all containing div - You can just add the background image to there.
If you have 2 wrapper elements then you can apply two background images to the same space.
Code:<div class="outer"> <div class="inner"> </div> </div>
Code:.outer { /* This element can contain the left column's background image */ background: #FFF url(left_bg.gif) repeat-y 0 0; } .inner { /* This element can contain the right column's background image */ background: transparent url(right_bg.gif) repeat-y 100% 0; }
If you can't manage to get it working - please post you code or a link to your site and well take a look in.
Hope it helps
-
Sep 12, 2007, 01:00 #12
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
equal height 100% high by:
faux columns easy to use and understand needs image(s)
borders + negative margins for background column colors only
eXtended easy to implement, has a few limitations , but can be pushed to free standing borders
position relative with position absolutes , content box must be higher, columns are real colums, IE < 7 is still usable
position relative model, with a position absolute model under it
All models need solid understanding how negative margins and position relative absolute work, some can be made very clean with minimum markup, others need additional markup, you can also use more then one way on the same pageLast edited by all4nerds; Sep 12, 2007 at 01:33.
-
Sep 14, 2007, 04:16 #13
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
Matching columns, equal height columns, L C R or C R or L C
make the columns , Yes its that easy
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;} p,h1,h2{padding:5px;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;} .wx{width:64em;} .wx{width:80%;} .ar{margin-right:16em;} .al{margin-left:16em;} .wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;} .ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} .al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} h2{clear:both;} </style> </head> <body> <div class="wra w"> <div class="ar"> <div class="al"> <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 /><br /><br /><br /><br /><br /><br /><br /> --> End</p> </div> </div> </div> </body> </html>
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;} p,h1,h2{padding:5px;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;} .wx{width:64em;} .wx{width:80%;} .ar{margin-right:16em;} .al{margin-left:16em;} .l,.ll{width:16em;} .l{margin-left:-15.9em;float:left;left:-.1em;} .ll{margin-right:-15.9em;float:right;left:.1em;} h2{clear:both;} .wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;} .ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} .al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} </style> <!--[if IE]> <style type="text/css"> * html .wra,* html .ar, * html .al{height:1%;} /* IE 5 5.5 6 haslayout */ * html .l,* html .ll{position:relative;} </style> <![endif]--> </head> <body> <div class="wra w"> <div class="ar"> <div class="al"> <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 /><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> <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> </body> </html>
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;} p,h1,h2{padding:5px;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;} .wx{width:64em;} .wx{width:80%;} .ar{margin-right:16em;} .al{margin-left:16em;} .l,.ll{width:16em;} .l{margin-left:-15.9em;float:left;left:-.1em;} .ll{margin-right:-15.9em;float:right;left:.1em;} h2{clear:both;} .wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;} .ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} .al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} head+body .q{overflow:auto;} * html .q{float:left;} * html .q h2{height:1%;} </style> <!--[if IE]> <style type="text/css"> * html .wra,* html .ar, * html .al{height:1%;} /* IE 5 5.5 6 haslayout */ * html .l,* html .ll{position:relative;} </style> <![endif]--> </head> <body> <div class="wra w"> <div class="ar"> <div class="al"> <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 /><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 /><br /><br /><br /><br /><br /><br /><br /> --> End</p> </div> </div> </div> </div> </body> </html>
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;} p,h1,h2{padding:5px;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;} .wx{width:64em;} .wx{width:80%;} .ar{margin-right:16em;} .al{margin-left:16em;} .l,.ll{width:16em;} .l{margin-left:-15.9em;float:left;left:-.1em;} .ll{margin-right:-15.9em;float:right;left:.1em;} h2{clear:both;} .wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;} .ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} .al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} head+body .q{overflow:auto;} * html .q{float:left;} * html .q h2{height:1%;} head+/* */body .fc:after{ /* min-height browser but not IE 7 */ content:"."; display:block; height:0px; clear:both; visibility:hidden; } </style> <!--[if IE]> <style type="text/css"> * html .fc{height:1%;} /* IE 5 5.5 6 haslayout */ *:first-child+html .fc{zoom:1;} /* IE 7 haslayout */ * html .wra,* html .ar, * html .al{height:1%;} /* IE 5 5.5 6 haslayout */ * html .l,* html .ll{position:relative;} </style> <![endif]--> </head> <body> <div class="wra w"> <div class="ar"> <div class="al fc"> <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 /><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 /><br /><br /><br /><br /><br /><br /><br /> --> End</p> </div> </div> </div> </div> </body> </html>
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:5px;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;} .wx{width:64em;} .wx{width:80%;} .ar{margin-right:16em;} .al{margin-left:16em;} .l,.ll{width:16em;} .l{margin-left:-15.9em;float:left;left:-.1em;} .ll{margin-right:-15.9em;float:right;left:.1em;} h2{clear:both;} .wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;} .ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} .al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} head+body .q{overflow:auto;} * html .q{float:left;} * html .q h2{height:1%;} head+/* */body .fc:after{ /* min-height browser but not IE 7 */ content:"."; display:block; height:0px; clear:both; visibility:hidden; } </style> <!--[if IE]> <style type="text/css"> * html .wra,* html body .al, * html body .ar{height:100%;} *:first-child+html .fc{zoom:1;} /* IE 7 haslayout */ * html .l,* html .ll{position:relative;} </style> <![endif]--> </head> <body> <div class="wra w"> <div class="ar"> <div class="al fc"> <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 /><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 /><br /><br /><br /><br /><br /><br /><br /> --> End</p> </div> </div> </div> </div> </body> </html>
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:5px;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;} .wx{width:64em;} .wx{width:80%;} head+body .wra{min-height:100%;position:relative;overflow:hi dden;} .ar{margin-right:16em;z-index:1;position:relative;} .al{margin-left:16em;} .l,.ll,.la,.lla{width:16em;} .l{margin-left:-15.9em;float:left;left:-.1em;} .ll{margin-right:-15.9em;float:right;left:.1em;} h2{clear:both;} head+body .q{overflow:auto;} * html .q{float:left;} * html .q h2{height:1%;} head+/* */body .fc:after{ /* min-height browser but not IE 7 */ content:"."; display:block; height:0px; clear:both; visibility:hidden; } head+body .la,head+body .lla{position:absolute;top:0;bottom:0;} head+body .la{left:0;} head+body .lla{right:0;} head+body .wra{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) 16em 100% no-repeat;} head+body .la{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} head+body .lla{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} </style> <!--[if IE]> <style type="text/css"> </style> <![endif]--> </head> <body> <div class="wra fc w"> <div class="ar fc"> <div class="al fc"> <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 /><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 /><br /><br /><br /><br /><br /><br /><br /> --> End</p> </div> </div> </div> <span class="la"> </span> <span class="lla"> </span> </div> </body> </html>
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:5px;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;} .wx{width:64em;} .wx{width:80%;} head+body .wra{min-height:100%;position:relative;} .ar{margin-right:16em;z-index:1;position:relative;} .al{margin-left:16em;} .l,.ll,.la,.lla{width:16em;} .l{margin-left:-15.9em;float:left;left:-.1em;} .ll{margin-right:-15.9em;float:right;left:.1em;} h2{clear:both;} head+body .q{overflow:auto;} head+/* */body .fc:after{ /* min-height browser but not IE 7 */ content:"."; display:block; height:0px; clear:both; visibility:hidden; } head+body .la,head+body .lla{position:absolute;top:0;bottom:0;} head+body .la{left:0;} head+body .lla{right:0;} head+body .wra{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) 16em 100% no-repeat;} head+body .la{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} head+body .lla{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} </style> <!--[if IE]> <style type="text/css"> * html .wra,* html body .al, * html body .ar{height:100%;} *:first-child+html .fc{zoom:1;} /* IE 7 haslayout */ * html .l,* html .ll{position:relative;} * html .la,* html .lla{display:none;} * html .q{float:left;} * html .q h2{height:1%;} * html .wra{background:#d8d8d8 url(http://www.google.nl/images/firefox/fox1.gif) right bottom no-repeat;} * html .ar{background:#b4b4b4 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} * html .al{background:#c6c6c6 url(http://www.google.nl/images/firefox/fox1.gif) left bottom no-repeat;} </style> <![endif]--> </head> <body> <div class="wra fc w"> <div class="ar fc"> <div class="al fc"> <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 /><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 /><br /><br /><br /><br /><br /><br /><br /> --> End</p> </div> </div> </div> <span class="la"> </span> <span class="lla"> </span> </div> </body> </html>
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;} .wx{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>
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;} .wx{width:64em;} .wx{width:80%;} .wra,.he,.na,* html .ar,.la,* html .al,.lla,.fo{border-color:#cc33cc;border-style:solid;} .wra,.ar,.he,.na,.l,.ll{position:relative;} .wra{ background:#d8d8d8; border-width:0 .1em; margin-top:-3.2em; } 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:3.25em 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:auto;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;} /* background images */ 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;} head+body .wra{background-position: 0 100%;} */ /* 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 -16.1em;/* */} * html .l{left:-.2em;/* */} * html .ll{left:.2em;/* */} * 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 */ </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>
Last edited by all4nerds; Sep 14, 2007 at 09:24.
Bookmarks