SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. Mar 15, 2006, 09:05 #1
    poslanik
    poslanik is offline
    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. Mar 15, 2006, 09:10 #2
    Ize
    Ize is offline
    SitePoint Guru Ize's Avatar
    Join Date
    Nov 2005
    Location
    The Netherlands
    Posts
    809
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check out this one: http://www.alistapart.com/articles/holygrail/
  3. Mar 15, 2006, 09:32 #3
    all4nerds
    all4nerds is offline
    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. Mar 15, 2006, 09:45 #4
    poslanik
    poslanik is offline
    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. Mar 15, 2006, 09:47 #5
    all4nerds
    all4nerds is offline
    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. Mar 15, 2006, 10:10 #6
    poslanik
    poslanik is offline
    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. Mar 15, 2006, 10:11 #7
    all4nerds
    all4nerds is offline
    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. Mar 15, 2006, 10:15 #8
    poslanik
    poslanik is offline
    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. Mar 15, 2006, 10:22 #9
    all4nerds
    all4nerds is offline
    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. Mar 15, 2006, 10:25 #10
    poslanik
    poslanik is offline
    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. Mar 15, 2006, 10:32 #11
    poslanik
    poslanik is offline
    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. Mar 15, 2006, 10:38 #12
    all4nerds
    all4nerds is offline
    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. Apr 14, 2006, 10:26 #13
    poslanik
    poslanik is offline
    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. Apr 14, 2006, 10:42 #14
    all4nerds
    all4nerds is offline
    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. Apr 15, 2006, 01:28 #15
    poslanik
    poslanik is offline
    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. Apr 15, 2006, 06:45 #16
    all4nerds
    all4nerds is offline
    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. Apr 15, 2006, 09:53 #17
    poslanik
    poslanik is offline
    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. Apr 15, 2006, 10:27 #18
    all4nerds
    all4nerds is offline
    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. Apr 16, 2006, 01:54 #19
    poslanik
    poslanik is offline
    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. Apr 16, 2006, 02:12 #20
    all4nerds
    all4nerds is offline
    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;

« Previous Thread | Next Thread »

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
  •  

Forum Rules