SitePoint Sponsor |
|
User Tag List
Results 1 to 20 of 20
-
Mar 15, 2006, 10:05 #1
- Join Date
- Jan 2006
- Location
- Croatia
- Posts
- 47
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Making a 3 column layout using CSS
Hi,
I need some help. I would like to code a website layout with 3 colums using CSS. I've seen some premade templates and I had tried using them as reference while making my own layout but to no avail as usual.
Thing is, nothing is working as it should in either Firefox and IE. I've provided links to my html document and css sylesheet. As you can see there's just a few lines of code but even that isn't working.
Also, if you know any links to articles or tutorials for making such layouts please post them.
Html document - http://rv-camp.net/various/index.htm
Css stylesheet - http://rv-camp.net/various/style.css
Thanks in advance
-
Mar 15, 2006, 10:10 #2
- Join Date
- Nov 2005
- Location
- The Netherlands
- Posts
- 808
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Check out this one: http://www.alistapart.com/articles/holygrail/
-
Mar 15, 2006, 10:32 #3
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
no DTD
3 pixel jog in IE #cblok{float:left;
floats are not cleared for FF NS Moz Op
head+body #wrap:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Ime tvrtke - naslov stranice</title> <meta name="description" content="Opis tvrtke u kratko" /> <meta name="keywords" content="ključne, riječi, vezane, uz, tvrtku" /> <meta name="author" content="Tomislav - nomad2389@gmail.com" /> <style type="text/css"> <!-- body{font-family:verdana,sans-serif;font-size: 10pt;} *{margin:0;padding:0;} #wrap{width:650px;background:yellow;margin:0 auto;padding:2px 2px 2px 2px;} #lblok{width:150px;float:left;margin-right:5px;/*vertical-align:top;*/background:lime;display:inline;} #dblok{width:150px;float:right;margin-left:5px;/* vertical-align:top; */background:lime;display:inline;} #cblok{width:340px;float:left;background:lime;/* vertical-align:top; */} head+body #wrap:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } --> </style> </head> <body> <div id="wrap"> <div id="lblok"> Placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder </div> <div id="cblok"> Placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, </div> <div id="dblok"> Placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder </div> </div> </body> </html>
-
Mar 15, 2006, 10:45 #4
- Join Date
- Jan 2006
- Location
- Croatia
- Posts
- 47
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks mate, the site's now fully functonal in FF, but it's still buggered with IE. Can you help me with that too?
-
Mar 15, 2006, 10:47 #5
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by poslanik
-
Mar 15, 2006, 11:10 #6
- Join Date
- Jan 2006
- Location
- Croatia
- Posts
- 47
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yes, you're right. I forgot to paste
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Why does this matter?
And another question if you don't mind.Code:head+body #wrap:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
-
Mar 15, 2006, 11:11 #7
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
DTD to get IE6 in the same box model as FF NS Moz OP see FAQ CSS
http://www.sitepoint.com/forums/show...61&postcount=1
clear the floats , see FAQ CSS
http://www.sitepoint.com/forums/show...5&postcount=15
the PIE way
http://www.positioniseverything.net/easyclearing.html
head+body #wrap:after{
content: ".";
display: block;
height:0;
clear: both;
visibility: hidden;
}
-
Mar 15, 2006, 11:15 #8
- Join Date
- Jan 2006
- Location
- Croatia
- Posts
- 47
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Sorry but I don't understand the terminlogy
What+s DTD, what does it mean to clear the floats, and what's PIE?
-
Mar 15, 2006, 11:22 #9
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
DTD, Doctype declaration
http://www.w3.org/QA/2002/04/valid-dtd-list.html
if you float containers you have to end the float, clear them, try to read the FAQ tread on it
PIE
Position Is Everything a website on problem solving with browsers
http://www.positioniseverything.net/
-
Mar 15, 2006, 11:25 #10
- Join Date
- Jan 2006
- Location
- Croatia
- Posts
- 47
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok thanks for all your help. Cheers!
-
Mar 15, 2006, 11:32 #11
- Join Date
- Jan 2006
- Location
- Croatia
- Posts
- 47
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
One more thing. I have downloaded a template from oswd.org to find out how these floats, divs and all that works. If you have time and will, please go through the code because this template doesn't clear the floats and works well with both IE and FF. It uses a wrap, 2 columns inside the wrap, and then multiple small content boxes within both left and right columns.
Link: http://rv-camp.net/various/temp/
-
Mar 15, 2006, 11:38 #12
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
You maybe better start of with Paul's sticky tread on 3 column design, so that you can build your own designs
http://www.sitepoint.com/forums/showthread.php?t=143801
had a quick look at the template this clears the floats
#footer {clear:both; text-align:center;}
PS you can't learn CSS HTML+Positioning in 5 minutes
-
Apr 14, 2006, 11:26 #13
- Join Date
- Jan 2006
- Location
- Croatia
- Posts
- 47
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi again.
I know you provided me with many links but I don't want to scrap my design. The problem I now have (should be the last) is that I need those 3 columns to expand when 1 of the other 2 is higher than the one in question. So when I put a lot of text in the center block I'd like for 2 side columns to expand together with it.
Please help me... again :S
-
Apr 14, 2006, 11:42 #14
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
your code so far please
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Ime tvrtke - naslov stranice</title> <meta name="description" content="Opis tvrtke u kratko" /> <meta name="keywords" content="ključne, riječi, vezane, uz, tvrtku" /> <meta name="author" content="Tomislav - nomad2389@gmail.com" /> <style type="text/css"> <!-- html,body{height:100%;} *{margin:0;padding:0;} body{font-family:verdana,sans-serif;font-size: 10pt;} .wrap{width:650px;background:yellow;margin:0 auto;} * html .wrap{height:100%;} head+body .wrap{min-height:100%;overflow:hidden;} .lblok{width:150px;float:left;margin:2px 5px 2px 2px;/*vertical-align:top;*/background:lime;display:inline;} .dblok{width:150px;float:right;margin:2px 2px 2px 5px;/* vertical-align:top; */background:lime;display:inline;} .cblok{width:336px;float:left;background:lime;margin:2px 0 0 0;/* vertical-align:top; */display:inline;} .wrap p{padding:5px;} head+body .wrap:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; } .ex{padding-bottom:32767px;margin-bottom:-32767px;} --> </style> </head> <body> <div class="wrap"> <div class="lblok ex"> <p> Placeholder <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> --> placeholder<br> </p> </div> <div class="cblok ex"> <p> Placeholder <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> --> placeholder<br> </p> </div> <div class="dblok ex"> <p> Placeholder <!-- <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> --> placeholder<br> </p> </div> </div> </body> </html>
Last edited by all4nerds; Apr 14, 2006 at 12:14.
-
Apr 15, 2006, 02:28 #15
- Join Date
- Jan 2006
- Location
- Croatia
- Posts
- 47
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi, thanks for the fast reply.
Here's my current code -> http://rv-camp.net/test
Stylesheet is style.css, so if you would be kind enough to apply these changed to my current file I would be very happy.
P.S. Why isn't putting a simple height:100%; attribute to all of my blocks enough?
-
Apr 15, 2006, 07:45 #16
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
PS ID you can only use one time per page, use Class if you need the css on several elements
eXtended column's
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>LearnCroatian.com - free phrases, expressions and basic knowledge in the Croatian language</title> <meta http-equiv="content-type" content="text/html; charset=windows-1250" /> <meta name="description" content="LearnCroatian.com is the site for grasping the basics of the Croatian language " /> <meta name="keywords" content="croatia, language, hrvatski, hrvatska, croatian" /> <meta name="author" content="Tomislav - nomad2389@gmail.com" /> <style type="text/css"> <!-- body{background:#1CA9DE url(oblaci.jpg) top left no-repeat;font-family:verdana,sans-serif; font-size: 10pt; padding:5px;} *{margin:0;padding:0;} #wrap{width:700px;background:#058FBC;margin:0 auto;border:3px solid #058fbc;} #banner {background:#8FD2F8 url(slika.jpg);margin-bottom:5px; height:125px;border:5px solid #8FD2F8;} #lblok,#dblok{width:150px;background:#8FD2F8;display:inline;} #lblok{float:left;margin-right:5px;} #dblok{float:right;margin-left:5px;} #cblok{width:390px;float:left;background:#8FD2F8;} .naslov,#naslovsredina {border-left:1px solid #058FBC;border-bottom:1px solid #058FBC;padding:2px;margin:10px 10px 5px 5px;color:white;font-variant:small-caps; font-weight:bold;letter-spacing:1px;} #naslovsredina{border-left:none;} .tekst {margin:10px; } #naslovslika {margin-left:5px; margin-top:5px; margin-right:425px; font-size:25px; color:white; font-variant:small-caps; font-weight:bold; letter-spacing:3px; border-bottom: 2px solid #058FBC; border-right: 2px solid #058FBC;} td {text-align: center;} table {border-collapse:collapse; border-color:#058FBC;} a {color:black; border-bottom:1px dotted #058FBC; text-decoration:none;} a:hover {color:black; border-bottom:0px; text-decoration:none;} table.sredina td {width:50%;} .crveno {color:#E71212;} head+body #wrap:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;} head+body #wrap{overflow:hidden;} head+body .ex:after{ content: "."; display:block; background:inherit; height:0; margin-bottom:-32767px; padding-top:32767px; } --> </style> <!--[if IE]> <style type="text/css"> * html .ex{padding-bottom:32767px;margin-bottom:-32767px;} </style> <![endif]--> </head> <body> <div id="wrap"> <div id="banner"> <div id="naslovslika"> <span class="crveno">L</span>e<span class="crveno">a</span>r<span class="crveno">n</span> C<span class="crveno">r</span>o<span class="crveno">a</span>t<span class="crveno">i</span>a<span class="crveno">n</span> </div> </div> <div id="lblok" class="ex"> <div class="naslov">CATEGORIES</div> <div class="tekst"> » <a href="index-2.html">Homepage</a> <br /> » <a href="abeceda.html">The alphabet</a> <br /> » <a href="izrazi.html">Phrasebook</a> <br /> » <a href="dani.html">Days, months & seasons</a> <br /> » <a href="brojevi.html">Numbers</a> <br /> </div> <div class="naslov">reklame</div> <div class="tekst">placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder </div> <div class="naslov">dodaci</div> <div class="tekst">placeholder, placeholder, placeholder, placeholder, placeholder, placeholder,</div> </div> <div id="cblok" class="ex"> <div id="naslovsredina">Welcome - dobrodošli</div> <div class="tekst"> Welcome to LearnCroatian.com, site designed for free grasping of the Croatian language. Whether you're coming here for holidays or business, you'll find enough information on this site to communicate with the locals and get what you want - providing you don't get into deep conversasions :) </div> </div> <div id="dblok" class="ex"> <div class="naslov">cjenik</div> <div class="tekst">Placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder, placeholder</div> <div class="naslov">klijenti</div> <div class="tekst">placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder, placeholder , placeholder, placeholder, placeholder, placeholder, placeholder</div> </div> </div> </body> </html>
-
Apr 15, 2006, 10:53 #17
- Join Date
- Jan 2006
- Location
- Croatia
- Posts
- 47
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks again, wraps better than your first code because on that one the wrap div and colum divs were the same hight so at the bottom the blocks overlapped the wrapper as if it didn't have padding.
Seems to work in FF and IE but not completely in Opera. Are all those :afters, exs, html+bodies hacks? Seems to me all designs need to be hacked to death in order work
P.S. Any special reason why the ex has 32767 set as margin and padding? Or can it be any large number?
-
Apr 15, 2006, 11:27 #18
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
works in IE6 FF1.07 1.5 NS 6 7.2 Moz 1.7 OP 7 8 8.5 9
you asked for column eXpand? = ex 32767 margin and padding
play with background colors, or background images to make colums
div's do not expand or follow other div's heights
* html only code for IE < 7
head+body code for FF NS Mz OP and IE > 6
bare 3 column demo no hacks, center column, must always be higher then, L R column
but can be set with a height IE min-height FF,etc
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Basic 3 Column Bare </title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> *{margin:0;padding:0;} body{font-size:75%;background:#a2a2a2;} div,div *{font-size:1em;} .wra{ width:64em; margin:1em auto; background:#b7b7b7; } .he{background:#ff8c00;} .na{background:#fbfbfb;} .l,.ll{float:left;width:14em;} .r{float:left;width:36em;background:#d8d8d8;} .fo{width:100%;background:#fbfbfb;clear:both;} .wra div *,.fo p{padding:5px;} </style> </head> <body> <div class="wra"> <div class="he"> <h1>header</h1> <p>Basic 3 Column Bare <br /><br /><br /></p> </div> <div class="na"><p>nav</p></div> <div class="l"><p>left<br /><br /><br /><br /><br /><br /><br /><br /><br />end</p></div> <div class="r"> <p>Content in this box must always be heigher then that of the left or right colunm</p> <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p> <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p> <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p> <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p> <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p> <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p> <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p> <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p> <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p> <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p> <p>Works in IE 5 5.5 6 / FF 1.07 1.5 / NS 6 6.1 7.1 7.2 8 / Moz 1.7 1.8 / OP 7.54 8 8.5 9</p> </div> <div class="ll"><p>left<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />end</p></div> <div class="fo"><p>footer</p></div> </div> </body> </html>
min height , borders, 3 color column's,
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{/*html for FF Moz NS7 OP */ text-align:center; /*IE 5 IE 5.5*/ margin:0;/* no margins body */ padding:0;/* no padding body */ } *{margin:0;padding:0;} body{font-size:75%;background:#eaeaea;} div,p{ font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; font-size:1em; color:#000000; margin:0em; padding:0em; text-align:left;/* to get text back to the left*/ } .wra{ width:64em; margin:1em auto; border:1px solid #000000; background:#e3dcc9; } .he{background:#ff6600;} .na{ border-top:1px solid #000000; border-bottom:.1em solid #000000; width:100%; list-style:none; } .na li{float:left;} .na a{display:block;text-decoration:none;color:#000000;border-right:.1em solid #000000;background:#ffff99;width:14.9em;} .na .y a{border-right:none;} .na a:hover,.lna a:hover{background:#ccff66;} .lna{list-style:none;width:15.9em;float:left;border-right:.1em solid #000000;} .lna li{float:left;} .lna a{ border-bottom:.1em solid #000000; text-decoration:none; color:#000000; display:block; width:14.9em; } .r{ width:16em; float:right; border-left:.1em solid #000000; } .con{ width:31.9em; float:left; border-left:.1em solid #000000; border-right:.1em solid #000000; position:relative; margin:0 -.1em 0 -.1em; background:#ffffff; } head+body .r,head+body .r,head+body .con{min-height:30em;} * html .r,* html .l,* html .con{height:30em;} .fo{ background:#ff6600; clear:both; border-top:.1em solid #000000; width:100%; } .wra p,.na a,.lna a{padding:.5em;} .x p{font-size:.9em;} head+body .na:after,head+body .lna:after,head+body .bc:after{ content: "."; display: block; height:0; clear: both; visibility: hidden; } .bc{background:#cccc99;} head+body .bc{margin-left:16em;} * html .bc{height:1%;float:left;} </style> <!--[if IE]> <style type="text/css"> * html .wra{width:64.2em;w\idth:64em;} * html .na a{width:16em;w\idth:14.9em;} * html .lna{width:16em;w\idth:14.9em;} * html .lna a{width:15.9em;w\idth:14.9em;} * html .r{width:16.1em;w\idth:16em;} * html .con{width:32.1em;w\idth:31.9em;} </style> <![endif]--> </head> <body> <div class="wra"> <div class="he"><p>header<br /><br /><br /><br /><br /></p></div> <ul class="na"><li><a href="##">nav</a></li><li><a href="##">nav</a></li><li><a href="##">nav</a></li><li class="y"><a href="##">nav</a></li></ul> <ul class="lna"><li><a href="##">nav</a></li><li><a href="##">nav</a></li><li><a href="##">nav</a></li><li><a href="##">nav</a></li></ul> <div class="bc"> <div class="r"><p>right<br />end<br /><br /><br /></p></div> <div class="con"><p> content<!-- <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> --> end </p> </div> </div> <div class="fo"><p>footer</p></div> <div class="fo x"><p>footer</p></div> </div> </body> </html>
-
Apr 16, 2006, 02:54 #19
- Join Date
- Jan 2006
- Location
- Croatia
- Posts
- 47
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm afraid it doesn't really work with opera. You see, when I put a lot of content in the centre block and when it starts to expand, at some points the side columns will stop following. Try it if you don't believe me. But I don't care, I like it the way it is.
I think I'll just give up on CSS and use templates... Cuz I'll never figure out how things work what needs hacking and all that annoying stuff.
-
Apr 16, 2006, 03:12 #20
- Join Date
- Jan 2005
- Location
- Netherlands
- Posts
- 4,300
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hello
use:
margin-bottom:-1000em;
padding-top:1000em;
Bookmarks