Ieinputin THREEcol

From CSS Discuss

Jump to: navigation, search

Try this code out in Mozilla where it renders right then take a look in IE 6.. the only know solution is to center the the middle box with left and right padding rather than margins... Thanks To the guys at glish for this wonderful layout

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0026)http://glish.com/css/7.asp -->
<HTML>
<HEAD>
<TITLE>glish.com : CSS layout techniques : 3 columns, the holy grail</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>@import url( all.css );
BODY {
  PADDING-RIGHT: 0px; 
  PADDING-LEFT: 0px; 
  PADDING-BOTTOM: 0px; 
  MARGIN: 10px 10px 0px; 
  PADDING-TOP: 0px;
}
#leftcontent {
  BORDER-RIGHT: #000 1px solid; 
  BORDER-TOP: #000 1px solid; 
  BACKGROUND: #fff; LEFT: 10px; 
  BORDER-LEFT: #000 1px solid; 
  WIDTH: 200px; 
  BORDER-BOTTOM: #000 1px solid; 
  POSITION: absolute; 
  TOP: 50px;
}
#centercontent {
  BORDER-RIGHT: #000 1px solid; 
  BORDER-TOP: #000 1px solid; 
  BACKGROUND: #fff; 
  MARGIN-LEFT: 201px; 
  BORDER-LEFT: #000 1px solid; 
  MARGIN-RIGHT: 201px; 
  BORDER-BOTTOM: #000 1px solid; 
  voice-family: inherit;
}
UNKNOWN {
  MARGIN-LEFT: 201px; 
  MARGIN-RIGHT: 201px;
}
#rightcontent {
  BORDER-RIGHT: #000 1px solid; 
  BORDER-TOP: #000 1px solid; 
  RIGHT: 10px; 
  BACKGROUND: #fff; 
  BORDER-LEFT: #000 1px solid; 
  WIDTH: 200px; 
  BORDER-BOTTOM: #000 1px solid; 
  POSITION: absolute; 
  TOP: 50px;
}
#banner {
  BORDER-RIGHT: #000 1px solid; 
  BORDER-TOP: #000 1px solid; 
  BACKGROUND: #fff; 
  BORDER-LEFT: #000 1px solid; 
  HEIGHT: 39px; 
  voice-family: inherit;
}
UNKNOWN {
  HEIGHT: 39px;
}
P {
  MARGIN: 0px 10px 10px;
}
H1 {
  MARGIN: 0px 10px 10px;
}
PRE {
  MARGIN: 0px 10px 10px;
}
H1 {
  FONT-SIZE: 14px; 
  PADDING-TOP: 10px;
}
#banner H1 {
  PADDING-RIGHT: 10px; 
  PADDING-LEFT: 10px; 
  FONT-SIZE: 14px; 
  PADDING-BOTTOM: 0px; 
  MARGIN: 0px; 
  PADDING-TOP: 10px;
}
#rightcontent P {
  FONT-SIZE: 10px;
}
</STYLE>
<META content="MSHTML 6.00.2800.1226" name=GENERATOR>
</HEAD>
<BODY>
  <DIV id=banner>
   <h1>A forms problem</h1>
  </DIV>
  <DIV id=leftcontent>
   <H1>leftcontent</H1>
    #leftcontent {
        position: absolute;
        left:10px;
        top:50px;
        width:200px;
        background:#fff;
        border:1px solid #000;
	}
    </DIV>
  <DIV id=centercontent>
    <form method="post" action="/file:/C:/Program%20Files/nusphere/phpED/projects/B_A_M/reg1.php">
    <fieldset>
         <legend>Personal information</legend>

Here is an interesting bug... If you have a div to create a middle column
then the form fields get their margins from the parent div, but ONLY after a br tag....

         <br />

Here we see an input filed in a DIV with a br tag before it... 
it gets pushed out into the middle of the fieldset 
by getting its margin from the above div.

        <br />
         First Name: *<br /><input type="text" name="first_name"  size="30" maxlength="50" value=""  />
        <br />
	
Here is the same basic idea sans the BR tag... 
notice that the field is NOT pushed out into the page.

        <br />
         Last Name: *<input type="text" name="last_name"  size="30" maxlength="50" value=""  />
        <br />

The only workaroud that I have come up with 
is to take the buffer for the left and right hand sides
off of the div's margins and move it into the padding...    

    </fieldset>
    </form>
  </DIV>
  <DIV id=rightcontent>
   <H1>rightcontent</H1>

       #rightcontent {
            position: absolute;
            right:10px;
            top:50px;
            width:200px;
            background:#fff;
            border:1px solid #000;
            }

</DIV> 
<BR style="CLEAR: both">
</BODY>
</HTML>
Personal tools