Topic: 3 column holy grail (Page 1 of 1)

( http://glish.com/css/7.asp )

I'm trying to edit the left and right columns widths.

If I set rightcontent width to 40, Do I add 160 to the values for margins in #centercontent? I tried that, and something went horribly wrong.

Why are the values 199 and 201? (Is it just a random number, that is 2 less for ie5?)

Here is the following style that works, slightly modified from above. I just need to change the widths

body

{

  background-color:#c0c0c0;

  color:#000000;

  font-family:Verdana, Arial, Helvetica, sans-serif;

  font-size:14px;

  margin: 0px;

  padding: 0px;

}



#centercontent p

{

  text-indent:30px;

}



#leftcontent

{

  background-color:#92c0ef;

  border: 1px solid #000000;

  position:absolute;

  left:0px;

  top:0px;

  width:200px;

}



#centercontent

{

  background-color:#FFA500;

  border: 1px solid #000000;

  margin-left:199px;

  margin-right:199px;

  /*

    IE5x can't render the box model, fix by "Tantek Celik"

  */

  voice-family: "\"}\"";

  voice-family: inherit;

  margin-left: 201px;

  margin-right:201px;

}



html>body #centercontent {

  margin-left: 201px;

  margin-right:201px;

}



#rightcontent

{ 

  background-color:#92c0ef;

  border: 1px solid #000000;

  

  position:absolute;

  right:0px;

  top:0px;

  width:200px;

}

[This message has been edited by ninmonkey (edited 01-16-2004).]

If you set the right content to 40px then subtract 160px from the margin-right vales fo the centercontent.

This layout works by allowing the leftcontent and rightcontent to live in the margins of the centercontent. Create the margins of the center content large enough to hold the left and right contents.




-- not necessarily stoned... just beautiful.