Hi
The code I am pasting below is just practice so the colors are goofy,
it's to help me see what is where. The text isn't styled either at
this time.
I am working on a fixed 2 columns/header/footer layout that I adapted
from one I found on the web.
Something is wrong as I can't place a 1px solid black border between
my navigation and content DIV's without the layout breaking up. I
tried on both the navigation and content div's to no avail. I placed
the border everywhere else.
The code validate for XHTML on the W3C site and there is a minor error
while validating the CSS on http://www.htmlhelp.com/cgi-bin/
csscheck.cgi. (W3C CSS validator is down right now.)
The error says:
-Error: Selectors must begin with a character in the range A-Z, a-z,
Unicode characters 161-255, or an escaped Unicode character as a
numeric code.
Can't figure that error out but I am sure it has nothing to do with my
broken layout.
I test in Firefox 2 and IE 7 and am running XP home ed. sp2.
Here is the 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" lang="en" xml:lang="en">
<head>
<title>XHTML 1.0 Strict Template</title>
<meta http-equiv="Content-type" content="text/html;
charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us" />
<style type="text/css">
html * {
margin: 0;
padding: 0;
}
body {
margin: 20px;
background: #E7AD52;
color: #000000;
}
div#container {
width: 700px;
margin: auto;
background: #EF1616;
color: #000000;
border: 1px solid black;
}
div#header {
background: #16EF2B;
color: #000000;
height: 80px;
border-bottom: 1px solid black;
}
div#navigation {
float: left;
width: 200px;
background: #EF1616;
color: #000000;
}
div#content {
float: right;
width: 500px;
background: #6979DB;
color: #000000;
}
div#footer {
clear: both;
background: #D07867;
color: #000000;
border-top: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Palms of the world</h1>
</div>
<div id="navigation">
column long long column very long fill fill fill long text text column
text silly very make long very fill silly make make long make text
fill very long text
column silly silly very column long very column filler fill long make
filler long silly very long silly silly silly long filler make column
filler make silly
long long fill very.
</div>
<div id="content">
column long long column very long fill fill fill long text text column
text silly very make long very fill silly make make long make text
fill very long text
column silly silly very column long very column filler fill long make
filler long silly very long silly silly silly long filler make column
filler make silly
long long fill very.
very make make fill silly long long filler column long make silly
silly column filler fill fill very filler text fill filler column make
fill make text very make
make very fill fill long make very filler column very long very filler
silly very make filler silly make make column column
fill long make long text very make long fill column make text very
silly column filler silly text fill text filler filler filler make
make make make text filler
fill column filler make silly make text text fill make very filler
column very
column text long column make silly long text filler silly very very
very long filler fill very fill silly very make make filler text
filler text make silly text
text long fill fill make text fill long text very silly long long
filler filler fill silly long make column make silly long column long
make very
column long long column very long fill fill fill long text text column
text silly very make long very fill silly make make long make text
fill very long text
column silly silly very column long very column filler fill long make
filler long silly very long silly silly silly long filler make column
filler make silly
long long fill very.
very make make fill silly long long filler column long make silly
silly column filler fill fill very filler text fill filler column make
fill make text very make
make very fill fill long make very filler column very long very filler
silly very make filler silly make make column column
fill long make long text very make long fill column make text very
silly column filler silly text fill text filler filler filler make
make make make text filler
fill column filler make silly make text text fill make very filler
column very
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
Thanks a lot for your help
Patrick
vaindiouxatyahoo.com
