By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,738 Members | 1,114 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,738 IT Pros & Developers. It's quick & easy.

Problem with 2 columns layout

P: n/a
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

Feb 4 '07 #1
Share this Question
Share on Google+
14 Replies


P: n/a
varois83 wrote :
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;
}
If your container is only going to use 700px, then you do not need to
set the margin and padding of every element of the page. In fact,
setting the padding of block-level elements used to host text to 0px is
a bad idea: this will make reading more difficult, less ventilated text.
body {
margin: 20px;
background: #E7AD52;
color: #000000;
}
If container is going to be centered within the remaining available
width, then why do you need to set the margin? It's unneeded.

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;
clear: right is better.
background: #D07867;
color: #000000;
border-top: 1px solid black;
}
</style>

</head>

<body>
<div id="container">
Notice here that <div id="container"duplicates the role of the body
element: it could be possible to remove entirely the <div
id="container"and let the body act like your <div id="container"so
that the DOM tree is less complex and easier to manage.
<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
Here's my solution:

http://www.gtalbot.org/NvuSection/Nv...STemplate.html

I just set the border-width to 3px to make it very visible, noticeable.

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages
Feb 5 '07 #2

P: n/a
Gérard Talbot a écrit :
varois83 wrote :
>Hi
[snipped]
>>
Patrick
vaindiouxatyahoo.com

Here's my solution:

http://www.gtalbot.org/NvuSection/Nv...STemplate.html
I just set the border-width to 3px to make it very visible, noticeable.
I just checked the page and it works accordingly with IE7, Safari 2.0.4,
Firefox 2.0.0.1, Seamonkey 1.1 and Opera 9.20.

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages
Feb 5 '07 #3

P: n/a
Scripsit varois83:
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.)
(There's been something very odd with the "W3C CSS Validator" recently.
Let's hope they'll fix it soon.=
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.
If you look at the error message closely, you'll note that it relates to
"*". And at http://www.htmlhelp.com/tools/csscheck/you can read:
"Note: CSSCheck is primarily a CSS1 checker. Many CSS2 properties are
supported, but new CSS2 selectors will generate errors."
And the universal selector "*" is indeed a "new" CSS2 selector.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Feb 5 '07 #4

P: n/a
Gérard Talbot wrote:
>
>body {
margin: 20px;
background: #E7AD52;
color: #000000;
}

If container is going to be centered within the remaining available
width, then why do you need to set the margin? It's unneeded.


A left and right margin of 20px will center the content. Is there a good
reason NOT to use it?
Feb 5 '07 #5

P: n/a
zzpat wrote:
Gérard Talbot wrote:
>>
>>body {
margin: 20px;
background: #E7AD52;
color: #000000;
}

If container is going to be centered within the remaining available
width, then why do you need to set the margin? It's unneeded.



A left and right margin of 20px will center the content. Is there a good
reason NOT to use it?

I removed 20px from body and had an interesting result. Check it out in
IE6.0. The left menu (color height) falls apart.

<!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 {
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>
--
Pat
Impeach Bush
http://zzpat.bravehost.com/

Articles of Impeachment
Center for Constitutional Rights
http://zzpat.bravehost.com/april_200...peachment.html
Feb 5 '07 #6

P: n/a
zzpat wrote:
Gérard Talbot wrote:
>>
>>body {
margin: 20px;
background: #E7AD52;
color: #000000;
}

If container is going to be centered within the remaining available
width, then why do you need to set the margin? It's unneeded.



A left and right margin of 20px will center the content. Is there a good
reason NOT to use it?

--

I had no idea margin: auto was used to center - now I do. I need to
catch up. ;-)

Feb 5 '07 #7

P: n/a
zzpat wrote :
Gérard Talbot wrote:
>>
>>body {
margin: 20px;
background: #E7AD52;
color: #000000;
}

If container is going to be centered within the remaining available
width, then why do you need to set the margin? It's unneeded.



A left and right margin of 20px will center the content. Is there a good
reason NOT to use it?
No. It will only give a margin around the body. My question was aimed at
the purpose of setting a margin when the main content (div#container) is
set a specific width and is centered anyway.

div#container {
width: 700px;
margin: auto;

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages
Feb 5 '07 #8

P: n/a
zzpat wrote :
zzpat wrote:
>Gérard Talbot wrote:
[snipped]
I removed 20px from body and had an interesting result. Check it out in
IE6.0. The left menu (color height) falls apart.
Patrick,

please do not post code. Just post an url. It's a lot more convenient
and this way we could figure out problems or issues with http header
responses.

I also strongly suggest and recommend that you do not focus *_too much_*
on IE6. What's important is support for new, recent, compliant web
browsers like Opera 9, Safari 2, IE7, Firefox 2, Konqueror 3.5, Icab 3,
Seamonkey 1.1. IE6 is rapidly losing browser market share due to
people upgrading to IE7 or switching to Firefox 2.
Generally speaking, what's important (accessibility) for old/legacy
browsers and non-capable-css/javascript browsers is that content remains
accessible and that navigation (links, anchors) remains functional.

Did you even check the page

http://www.gtalbot.org/NvuSection/Nv...STemplate.html

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages
Feb 5 '07 #9

P: n/a
Gérard Talbot wrote:
zzpat wrote :
>zzpat wrote:
>>Gérard Talbot wrote:

[snipped]
>I removed 20px from body and had an interesting result. Check it out
in IE6.0. The left menu (color height) falls apart.

Patrick,

please do not post code. Just post an url. It's a lot more convenient
and this way we could figure out problems or issues with http header
responses.

I also strongly suggest and recommend that you do not focus *_too much_*
on IE6. What's important is support for new, recent, compliant web
browsers like Opera 9, Safari 2, IE7, Firefox 2, Konqueror 3.5, Icab 3,
Seamonkey 1.1. IE6 is rapidly losing browser market share due to people
upgrading to IE7 or switching to Firefox 2.
Generally speaking, what's important (accessibility) for old/legacy
browsers and non-capable-css/javascript browsers is that content remains
accessible and that navigation (links, anchors) remains functional.

Did you even check the page

http://www.gtalbot.org/NvuSection/Nv...STemplate.html
Gérard
If you remove the margin from the body at
http://www.gtalbot.org/NvuSection/Nv...STemplate.html
the left menu falls apart in IE6. Unless I missed something, that
shouldn't happen.
--
Pat
Impeach Bush
http://zzpat.bravehost.com/

Articles of Impeachment
Center for Constitutional Rights
http://zzpat.bravehost.com/april_200...peachment.html
Feb 5 '07 #10

P: n/a
zzpat wrote :
Gérard Talbot wrote:
>zzpat wrote :
>>zzpat wrote:
Gérard Talbot wrote:

[snipped]
>>I removed 20px from body and had an interesting result. Check it out
in IE6.0. The left menu (color height) falls apart.

Patrick,

please do not post code. Just post an url. It's a lot more convenient
and this way we could figure out problems or issues with http header
responses.

I also strongly suggest and recommend that you do not focus *_too
much_* on IE6. What's important is support for new, recent, compliant
web browsers like Opera 9, Safari 2, IE7, Firefox 2, Konqueror 3.5,
Icab 3, Seamonkey 1.1. IE6 is rapidly losing browser market share due
to people upgrading to IE7 or switching to Firefox 2.
Generally speaking, what's important (accessibility) for old/legacy
browsers and non-capable-css/javascript browsers is that content
remains accessible and that navigation (links, anchors) remains
functional.

Did you even check the page

http://www.gtalbot.org/NvuSection/Nv...STemplate.html
Gérard

If you remove the margin from the body
IE 6 has default margin: 15px (top and bottom) and 10px (left and
right). So when you say remove the margin from the body, what do you
mean exactly? Set it to 0px or use the default?
Why does it matter to set the margin to begin with if the div#container
is going to be centered anyway?
at
http://www.gtalbot.org/NvuSection/Nv...STemplate.html
the left menu falls apart in IE6.

What do you mean with "falls apart"?
Is the menu still usable and just misplaced? Is the content still
accessible and links still functional? I don't use IE6 so I can't verify
what you're saying. Overall, IE5.x and IE6 has had *_many many bugs with
floats_*: just visit

Explorer Exposed!
http://www.positioniseverything.net/explorer.html

With IE7 listed as a recommendable update at Windows Update, you can
expect IE7 to replace IE6 in the browser market *_much faster_* than it
took IE6 to replace IE5.x. So, you have to consider this matter among
other issues that I already explained.

People using IE6 are not well served (standards compliance,
accessibility, usability, lots of bugs, etc) and not better protected too:

US Government warns against Internet Explorer (June 30th 2004)
http://www.theinquirer.net/default.aspx?article=16922

Vulnerability Note VU#713878
Microsoft Internet Explorer does not properly validate source of
redirected frame
http://www.kb.cert.org/vuls/id/713878

"a flaw in Microsoft Internet Explorer could allow a Web site to dump
malicious programs onto Windows computers. The alert was highly unusual
because CERT normally avoids public warnings about vulnerabilities until
patches to fix them are available. By Friday, June 25, it became clear
why the experts were worried. Reports started flowing from security
services that unsuspecting computer users were being hit by a program
that could log their keystrokes, grab account information and passwords,
and send them back to a computer in Russia. The initial assault was
stopped over the weekend by shutting down the Russian site and updating
antivirus software to deal with the program, known as either
JS.scob.trojan or download.Ject. But the basic vulnerabilities remain,
and a second wave of attacks seems likely.
"
What's the New IE Flaw All About?
http://www.businessweek.com/technolo...7343_tc119.htm

The 25 Worst Tech Products of All Time
http://www.pcworld.com/article/id,12...s/article.html
http://www.pcworld.com/article/id,12...ticle.html#ie6
IE 6 is the 8th worst tech product of all time according to pcworld.com!

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages
Feb 5 '07 #11

P: n/a
zzpat wrote :
Gérard Talbot wrote:
>zzpat wrote :
>>zzpat wrote:
Gérard Talbot wrote:

[snipped]
>>I removed 20px from body and had an interesting result. Check it out
in IE6.0. The left menu (color height) falls apart.
Then don't remove the 20px margin from the body. My original and initial
comment was that setting a margin on the body was unneeded:
| If container is going to be centered within the remaining available
width,
| then why do you need to set the margin? It's unneeded.
If you remove the margin from the body at
http://www.gtalbot.org/NvuSection/Nv...STemplate.html
the left menu falls apart in IE6.
Then don't remove the margin from the body.

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages
Feb 5 '07 #12

P: n/a
In article <12*************@corp.supernews.com>,
Gérard Talbot <ne***********@gtalbot.orgwrote:
please do not post code. Just post an url.
Good advice. But it does not mean that when someone does post
extensive code that you have to quote so much of it when
replying. You are very slack in editing your posts. If you do not
improve shortly I will ask Mr Korpela to have a word to you. Then
you will note it better.

--
dorayme
Feb 6 '07 #13

P: n/a
On Feb 4, 10:51 pm, Gérard Talbot <newsblahgr...@gtalbot.orgwrote:
Gérard Talbot a écrit :
Here's my solution:
http://www.gtalbot.org/NvuSection/Nv...olumnsCSSTempl...

Gerard

I just spend a little while looking at your solution and am amazed at
your knowledge to tell you the truth. Basically the float:left was
removed from the navigation <DIVin the CSS and the navigation/
content <DIV>'s were switched position in the body.
What I realized with your help is that this layout does not work well
and I will not pursue it any longer, I have more in books and online
to learn from. I added/removed text in the navigation/content <DIV>'s
from your fixed layouts and all hell broke loose again. It took me a
while to figure out what was wrong as I had pasted your code (CSS
portion) in my editor but not the body portion and I had added/removed
text from the navigation/content <DIV>'s and I couldn't get the same
result as you did, I got so frustrated that I did a tedious line by
line comparison and realized that I had more/less text than you. I
never thought that would have broken the layout but it did (Try it.)
About me posting code here instead of a URL well, I do work only
offline right now with no live site, I will work on that soon.

Thanks again Gerard your help is appreciated.

A plus tard

Merci

Patrick

Feb 6 '07 #14

P: n/a
If you look at the error message closely, you'll note that it relates to
"*". And athttp://www.htmlhelp.com/tools/csscheck/youcan read:
"Note: CSSCheck is primarily a CSS1 checker. Many CSS2 properties are
supported, but new CSS2 selectors will generate errors."
And the universal selector "*" is indeed a "new" CSS2 selector.
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
Jukka

Thanks for spoting that for me. I can't wait for the W3C validator to
be back up.

Thanks again

Patrick
Feb 6 '07 #15

This discussion thread is closed

Replies have been disabled for this discussion.