SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast
    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

  2. #2
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    Non-Member
    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>

  4. #4
    SitePoint Enthusiast
    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?

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by poslanik
    Thanks mate, the site's now fully functonal in FF, but it's still buggered with IE. Can you help me with that too?
    ? my code runs in IE6 FF NS Moz OP ?

  6. #6
    SitePoint Enthusiast
    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">
    to my index file.

    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;
    	}
    What does this piece of code actually do? And what does DTD mean. What about 3px jog in IE, what did you mean by that?

  7. #7
    Non-Member
    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;
    }

  8. #8
    SitePoint Enthusiast
    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?

  9. #9
    Non-Member
    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/

  10. #10
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Location
    Croatia
    Posts
    47
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks for all your help. Cheers!

  11. #11
    SitePoint Enthusiast
    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/

  12. #12
    Non-Member
    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

  13. #13
    SitePoint Enthusiast
    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

  14. #14
    Non-Member
    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 11:14.

  15. #15
    SitePoint Enthusiast
    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?

  16. #16
    Non-Member
    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">
    &#187; <a href="index-2.html">Homepage</a>   <br />
    &#187; <a href="abeceda.html">The alphabet</a>   <br />
    &#187; <a href="izrazi.html">Phrasebook</a>          <br />
    &#187; <a href="dani.html">Days, months &amp; seasons</a>    <br />
    &#187; <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>

  17. #17
    SitePoint Enthusiast
    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?

  18. #18
    Non-Member
    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>

  19. #19
    SitePoint Enthusiast
    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.

  20. #20
    Non-Member
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •