Below is the CSS for a two column layout, modify as you wish but follow the
same basic coding.
Also if you visit A List Apart's web site their are many articles with code
and tutorials for doing most any kind of layout and much more. Also the
W3C.org site has the standards with illustrations for CSS and XHTML. Is
there a particular reason you are using XHTML? Most of us use HTML 4.01
standard for marking up web pages along with CSS of course.
Sincerely
Dr. W. Fred Butts PhD Computer Sciences
The markup:
body {
margin:0px;
padding:0px;
font-family:verdana, arial, helvetica, sans-serif;
color:#333;
background-color:white;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
line-height:28px;
font-weight:900;
color:#ccc;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}
a {
color:#09c;
font-size:11px;
text-decoration:none;
font-weight:600;
font-family:verdana, arial, helvetica, sans-serif;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
#Header {
margin:50px 0px 10px 0px;
padding:17px 0px 0px 20px;
/* For IE5/Win's benefit height = [correct height] + [top padding] + [top
and bottom border widths] */
height:33px; /* 14px + 17px + 2px = 33px */
border-style:solid;
border-color:black;
border-width:1px 0px; /* top and bottom borders: 1px; left and right
borders: 0px */
line-height:11px;
background-color:#eee;
/* Here is the ugly brilliant hack that protects IE5/Win from its own
stupidity.
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it.
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style
declaration. The incorrect IE5/Win value is above, while the correct value
is
below. See http://glish.com/css/hacks.asp for details. */
voice-family: "\"}\"";
voice-family:inherit;
height:14px; /* the correct height */
}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds
correct
length values to user agents that exhibit the parsing error exploited above
yet get
the CSS box model right and understand the CSS2 parent-child selector.
ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack
(above). */
body>#Header {height:14px;}
#Content {
margin:0px 50px 50px 200px;
padding:10px;
}
#Menu {
position:absolute;
top:100px;
left:20px;
width:172px;
padding:10px;
background-color:#eee;
border:1px dashed #999;
line-height:17px;
/* Again, the ugly brilliant hack. */
voice-family: "\"}\"";
voice-family:inherit;
width:150px;
}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}
----- Original Message -----
From: "Trusz, Andrew" <[EMAIL PROTECTED]>
To: <wsg@webstandardsgroup.org>
Sent: Monday, February 07, 2005 8:17 AM
Subject: RE: [WSG] 2 Column Symetrical Stretching Layout?
:
:
: -----Original Message-----
: From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]] On
: Behalf Of Joey
: Sent: Saturday, February 05, 2005 8:11 AM
: To: wsg@webstandardsgroup.org
: Subject: Re: [WSG] 2 Column Symetrical Stretching Layout?
:
: Hi Drew,
:
: I removed the 45% margin from #right but this still never worked:
:
: This is what i did:
: *
: Before:* #right{width:45%; background-color:#00FF00; padding:0; margin:0 0
0
: 45%;}
: *After:* #right{width:45%; background-color:#00FF00; padding:0; margin:0;}
:
: Does anyone have any ideas on how to solve this? I dont want to resort to
: tables to get a 50% 50% 2 column stretching layout.
:
: Im a novice with CSS/XHTML, but i feel im picking it up fast, but this
: simple layout i cant seem to do.
:
: Cheers,
:
: Josef
:
: ------
:
: That's what happens when you rush an answer on Friday as you head out the
: door and don't read the list on weekends. This code produces a red and a
: green box which are side by each and have your 50px margin. What I did is
: eliminate the width on main and make both boxes float. Rule of thumb: if
you
: have a width you need a float.
:
: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
: "http://www.w3.org/TR/html4/transitional.dtd">
: <html>
: <head>
: <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
: <title>Untitled Document</title>
: <style type="text/css">
: #main{padding:0 50px 0 50px; margin:0;}
: #left{width:50%; background-color:#FF0000; padding:0; margin:0;
: float:left;}
: #right{width:50%;float:left; background-color:#00FF00; padding:0;
: margin:0 0
: 0 0;}
: .next{clear:both;}
: </style>
: </head>
:
: <body>
:
: <div id="main">
: <div id="left"> <br></div>
: <div id="right"> <br></div>
: <div class="next"></div>
: </div>
: <p>Text in the first element outside the boxes and their container.</p>
:
: </body>
: </html>
:
: drew
: ******************************************************
: The discussion list for http://webstandardsgroup.org/
:
: See http://webstandardsgroup.org/mail/guidelines.cfm
: for some hints on posting to the list & getting help
: ******************************************************
:
:
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
