RE: [WSG] 2 Column Symetrical Stretching Layout?

2005-02-07 Thread Trusz, Andrew
 

-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
titleUntitled Document/title
style type=text/css
 #main{padding:0 50px 0 50px; margin:0;}
#left{width:50%; background-color:#FF; 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=leftnbsp;br/div
div id=rightnbsp;br/div
div class=next/div
/div
pText 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
**



Re: [WSG] 2 Column Symetrical Stretching Layout?

2005-02-07 Thread Fred Butts
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;
 }
#Contentp {margin:0px;}
#Contentp+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
: titleUntitled Document/title
: style type=text/css
: #main{padding:0 50px 0 50px; margin:0;}
:#left{width:50%; background-color:#FF; 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=leftnbsp;br/div
: div id=rightnbsp;br/div
: div class=next/div
: /div
: pText 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

Re: [WSG] 2 Column Symetrical Stretching Layout?

2005-02-07 Thread Joey




Hi Fred,
thanks for that, ill give it a try soon and let you know how it all
goes. As for the HTML 4.01 comment, i think actual the majority of CSS
developers would use XHTML 1.0, as HTML 4.01 is out dated and has
deprecated elements nowadays, that dont conform with current web
standards. I suggest you move over to XHTML 1.0 plus many more user
agents understand XHTML. Anybody else wish to comment on this, cause i
always assumed CSS went hand in hand with XHTML 1.0.

Cheers again Fred

Josef

Fred Butts wrote:

  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;
 }
#Contentp {margin:0px;}
#Contentp+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"
: titleUntitled Document/title
: style type="text/css"
: #main{paddi

Re: [WSG] 2 Column Symetrical Stretching Layout?

2005-02-05 Thread Joey
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
--
Trusz, Andrew wrote:
 


*From:* [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] *On Behalf Of *Joey
*Sent:* Friday, February 04, 2005 12:53 PM
*To:* wsg@webstandardsgroup.org
*Subject:* Re: [WSG] 2 Column Symetrical Stretching Layout?
Hi Tom,
Thanks for that solution, but unfortunately it doesnt work,
because i get a horizontal scrollbar at the bottom of the page, in
both Firefox and IE. Does anyone else have any solutions for this?
Thanks
Josef
Tom Livingston wrote:
This worked for me:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
meta http-equiv=Content-Type content=text/html;
charset=iso-8859-1
titleUntitled Document/title
style type=text/css
#main{width:100%; padding:0 50px 0 50px; margin:0;}
#left{width:45%; background-color:#FF; padding:0; margin:0;
float:left;}
#right{width:45%; background-color:#00FF00; padding:0; margin:0 0
0 45%;}
/style
/head
body
div id=main
div id=leftnbsp;br/div
div id=rightnbsp;br/div
/div
/body
/html 

 ==
 
Remove the 45% margin #right and it will work fine. 
 
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
**


Re: [WSG] 2 Column Symetrical Stretching Layout?

2005-02-05 Thread David Laakso
On Sat, 05 Feb 2005 13:11:26 +, Joey [EMAIL PROTECTED]  
wrote:

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
.
Not  sure if this will meet your need:
#left {
border: 1px dotted red;
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
text-align: center;
width: 50%;
}
#right {
border: 1px dashed blue;
height: 100%;
left: 50%;
margin-left: -2px;
position: absolute;
text-align: center;
top: 0;
width: 50%;
z-index: 2;
}
div id=right
pright/p
/div
div id=left
pleft/p
/div
David
--
http://www.dlaakso.com/
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] 2 Column Symetrical Stretching Layout?

2005-02-05 Thread Joey
Hi David,
I tried that solution, but it also never worked, i uploaded it here:
http://www.burninthespotlight.com/cssprob/ll/css_50_50.htm
Is it really that difficult to create a simple 2 column layout in CSS? 
Im beggining to doubt CSS if this is the case. All i need is a 2 column 
layout with each column being 50% and when u stretch the browser each 
column increases (but both stay at 50%)

Here is a table version of what i am trying to acheive: 
http://www.burninthespotlight.com/cssprob/ll/table_50_50.htm

I hope some one has a solution...
Cheers people,
Josef
David Laakso wrote:
On Sat, 05 Feb 2005 13:11:26 +, Joey 
[EMAIL PROTECTED]  wrote:

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
.
Not  sure if this will meet your need:
#left {
border: 1px dotted red;
height: 100%;
margin: 0;
overflow: hidden;
padding: 0;
text-align: center;
width: 50%;
}
#right {
border: 1px dashed blue;
height: 100%;
left: 50%;
margin-left: -2px;
position: absolute;
text-align: center;
top: 0;
width: 50%;
z-index: 2;
}
div id=right
pright/p
/div
div id=left
pleft/p
/div
David
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] 2 Column Symetrical Stretching Layout?

2005-02-05 Thread Gunlaug Srtun
Joey wrote:
Is it really that difficult to create a simple 2 column layout in 
CSS? Im beggining to doubt CSS if this is the case. All i need is a 2
 column layout with each column being 50% and when u stretch the 
browser each column increases (but both stay at 50%)

Here is a table version of what i am trying to acheive: 
http://www.burninthespotlight.com/cssprob/ll/table_50_50.htm

I hope some one has a solution...
Well, my old list a table doesn't fill the browser-window, but the
method is the same no matter what it is supposed to fill.
http://www.gunlaug.no/homesite/main_8_7.html
... bilingual, select language on arrival.
Maybe it's a bit more than you asked for, but there's no tables
involved - just some CSS and (x)html-elements. Simplify it and use other
elements, and you can create pretty much any table look-alike you can
come up with.
My solution is flexible within a flexible column, and it will stay just
as flexible if you recreate it on its own. The code for that part is in
the page-head-- included IE/win corrections.
(Never - ever - underestimate CSS :) )
regards
Georg
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] 2 Column Symetrical Stretching Layout?

2005-02-05 Thread IChao
you might try
http://www.satzansatz.de/cssd/columnswapping.html
Ingo Chao
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


[WSG] 2 Column Symetrical Stretching Layout?

2005-02-04 Thread Joey




Hi everyone,

I wondered if anyone knew of some code for a simple 2 column layout,
imagine:

50% Left Column
50% Right Column

And when you stretch the browser the 2 columns will stretch too, but
always both stay 50% of the browsers width. I have tried setting up
something like this:

div id="main"
div id="left"/div
div id="right"/div
/div


#main {
 margin-left:50px;
 margin-right:50px;
}

#left {
 width:50%;
 float:left;
}

#right {
 width:50%;
 float:left;
}


But that only works in firefox, and i need this layout to be al all
browser thing. Im sure its simple to do, but i cant seem to get it to
work in IE.

Thanks guys!

Josef

---

Josef
Dunne 
Web Developer

w: http://www.burninthespotlight.com

Get
Firefox!

---
THIS EMAIL MAY CONTAIN CONFIDENTIAL OR LEGALLY PRIVILEGED INFORMATION.
IF YOU ARE NOT THE NAMED ADDRESSEE YOU MUST NOT USE OR DISCLOSE SUCH
INFORMATION.
---




Re: [WSG] 2 Column Symetrical Stretching Layout?

2005-02-04 Thread Tom Livingston
Maybe:
 #main {
    width:100%;
     padding:0 50px 0 50px;
 }
hmm. Then left and right won't really be 50% each. More like 50% minus  
100px. Maybe play with %s on those 2. Seems like it won't be  
pixel-perfect. Seems like you would need wiggle room.

HTH... a little maybe?? :-P

On Feb 4, 2005, at 11:11 AM, Joey wrote:
Hi everyone,
 I wondered if anyone knew of some code for a simple 2 column layout,  
imagine:

 50% Left Column
 50% Right Column
 And when you stretch the browser the 2 columns will stretch too, but  
always both stay 50% of the browsers width. I have tried setting up  
something like this:

div id=main
 div id=left/div
 div id=right/div
 /div
 #main {
     margin-left:50px;
     margin-right:50px;
 }
 #left {
     width:50%;
     float:left;
 }
 #right {
     width:50%;
     float:left;
 }
 But that only works in firefox, and i need this layout to be al all  
browser thing. Im sure its simple to do, but i cant seem to get it to  
work in IE.

 Thanks guys!
 Josef
--- 


Josef Dunne
 Web Developer
w: http://www.burninthespotlight.com
Get Firefox!
  
--- 

 THIS EMAIL MAY CONTAIN CONFIDENTIAL OR LEGALLY PRIVILEGED INFORMATION.
 IF YOU ARE NOT THE NAMED ADDRESSEE YOU MUST NOT USE OR DISCLOSE SUCH
 INFORMATION.
  
--- 



Tom Livingston
Senior Multimedia Artist
Media Logic
mlinc.com
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] 2 Column Symetrical Stretching Layout?

2005-02-04 Thread Tom Livingston
This worked for me:
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN
http://www.w3.org/TR/html4/loose.dtd;
html
head
meta http-equiv=Content-Type content=text/html; charset=iso-8859-1
titleUntitled Document/title
style type=text/css
#main{width:100%; padding:0 50px 0 50px; margin:0;}
#left{width:45%; background-color:#FF; padding:0; margin:0; 
float:left;}
#right{width:45%; background-color:#00FF00; padding:0; margin:0 0 0 
45%;}
/style
/head

body
div id=main
div id=leftnbsp;br/div
div id=rightnbsp;br/div
/div
/body
/html
On Feb 4, 2005, at 11:29 AM, Tom Livingston wrote:
hmm. Then left and right won't really be 50% each. More like 50% minus 
100px. Maybe play with %s on those 2. Seems like it won't be 
pixel-perfect. Seems like you would need wiggle room.

HTH... a little maybe?? :-P

Tom Livingston
Senior Multimedia Artist
Media Logic
mlinc.com
**
The discussion list for  http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list  getting help
**


Re: [WSG] 2 Column Symetrical Stretching Layout?

2005-02-04 Thread Joey




Hi Tom,

Thanks for that solution, but unfortunately it doesnt work, because i
get a horizontal scrollbar at the bottom of the page, in both Firefox
and IE. Does anyone else have any solutions for this?

Thanks

Josef

Tom Livingston wrote:
This
worked for me:
  
  
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  
"http://www.w3.org/TR/html4/loose.dtd"
  
html
  
head
  
meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1"
  
titleUntitled Document/title
  
style type="text/css"
  
#main{width:100%; padding:0 50px 0 50px; margin:0;}
  
#left{width:45%; background-color:#FF; padding:0; margin:0;
float:left;}
  
#right{width:45%; background-color:#00FF00; padding:0; margin:0 0 0
45%;}
  
/style
  
/head
  
  
body
  
  
div id="main"
  
div id="left"nbsp;br/div
  
div id="right"nbsp;br/div
  
/div
  
/body
  
/html
  
  
  
On Feb 4, 2005, at 11:29 AM, Tom Livingston wrote:
  
  
  hmm. Then left and right won't really be 50%
each. More like 50% minus 100px. Maybe play with %s on those 2. Seems
like it won't be pixel-perfect. Seems like you would need wiggle room.


HTH... a little maybe?? :-P

  
  

  
Tom Livingston
  
Senior Multimedia Artist
  
Media Logic
  
mlinc.com
  
  
  
**
  
The discussion list for http://webstandardsgroup.org/
  
  
See http://webstandardsgroup.org/mail/guidelines.cfm
  
for some hints on posting to the list  getting help
  
**
  
  
  


-- 
---

Josef
Dunne 
Web Developer

w: http://www.burninthespotlight.com

Get
Firefox!

---
THIS EMAIL MAY CONTAIN CONFIDENTIAL OR LEGALLY PRIVILEGED INFORMATION.
IF YOU ARE NOT THE NAMED ADDRESSEE YOU MUST NOT USE OR DISCLOSE SUCH
INFORMATION.
---




RE: [WSG] 2 Column Symetrical Stretching Layout?

2005-02-04 Thread Trusz, Andrew





  
  
  From: [EMAIL PROTECTED] 
  [mailto:[EMAIL PROTECTED] On Behalf Of JoeySent: 
  Friday, February 04, 2005 12:53 PMTo: 
  wsg@webstandardsgroup.orgSubject: Re: [WSG] 2 Column Symetrical 
  Stretching Layout?
  Hi 
  Tom,Thanks for that solution, but unfortunately it doesnt work, 
  because i get a horizontal scrollbar at the bottom of the page, in both 
  Firefox and IE. Does anyone else have any solutions for 
  this?ThanksJosefTom Livingston wrote: 
  
This worked for me: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 
4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" 
html head meta http-equiv="Content-Type" 
content="text/html; charset=iso-8859-1" titleUntitled 
Document/title style type="text/css" 
#main{width:100%; padding:0 50px 0 50px; margin:0;} #left{width:45%; 
background-color:#FF; padding:0; margin:0; float:left;} 
#right{width:45%; background-color:#00FF00; padding:0; margin:0 0 0 
45%;} /style /head body 
div id="main" div 
id="left"nbsp;br/div div 
id="right"nbsp;br/div /div 
/body /html==

Remove the 45% margin#right and it will work 
fine.

drew