-----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">&nbsp;<br></div>
<div id="right">&nbsp;<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
******************************************************

Reply via email to