can anyone tell me how to set auto height to outer div that is in green box id "gray-background" it should increase relatively to inner div "smbox" here is the css and html code it should work in FF, IE6 and IE7
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Employee Listing </TITLE>
<META NAME="Generator " CONTENT="EditPl us">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Descripti on" CONTENT="">
<link type="text/css" href="css/styles.css" rel="stylesheet ">
</HEAD>
<BODY>
<div id="topstrip"> </div>
<div id="header">
<div id="container" >
<div id="logo">
</div>
<div id="info">
<a href="#">CHANGE PASSWORD</a>
|
<a href="#">LOGOUT </a>
</div>
</div>
</div>
<div class="breadcru mbs"></div>
<div id="navcontaine r">
<ul id="navlist">
<li><a href="employee. html" id="current">Em ployee</a></li>
<li id="active" style="margin-left:10px;"><a href="admin.htm l">Admin</a></li>
<li style="margin-left:10px;"><a href="events.ht ml">Events</a></li>
<li style="margin-left:10px;"><a href="reports.h tml">Reports</a></li>
</ul>
<div id="gray-background">
<div>
<div id="navcontaine r2">
<ul id="innernavlis t">
<li id="active"><a href="#" id="current">Ma ster Data</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Roles and Rights</a></li>
<li><a href="#">Docume nt Templates</a></li>
</ul>
<div class="smbox">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>
</BODY>
</HTML>
-------------------------------------------------------------------------
and css is
body {
color:#333333;
font-family:"Trebuch et",Trebuchet,V erdana,Arial,sa ns-serif;
font-size:12px;
margin:0 auto;
}
#topstrip{
height:10px;
/*background-image:url(../images/topheaderbg.jpg );*/
background-color:#99CC66;
border-bottom:1px solid #FFFFFF;
}
#header{
background-color:#FFFFFF;
border-bottom:1px dotted #CCCCCC;
margin:0pt;
padding:0pt 0pt 0pt 30px;
}
#container {
height:55px;
position:relati ve;
width:707px;
}
#logo{
left:0pt;
position:relati ve;
top:10px;
}
img{
border:0pt none;
}
#info{
border:1px solid #A0BDEB;
color:#6699CC;
font-size:10px;
padding:2px 5px 2px 2px;
position:absolu te;
right:0pt;
top:15px;
}
a {
color:#336699;
}
.breadcrumbs{
border-bottom:1px dotted #CCCCCC;
color:#777777;
font-family:Arial,Ve rdana,sans-serif;
font-size:12px;
font-weight:normal;
line-height:15px;
margin:0pt;
height:15px;
padding:5px 5px 3px 40px;
}
#navcontainer {
border-bottom:1px solid #666666;
padding-top:7px;
}
#gray-background {
background-color:#F8FCF2;
padding-bottom:20px;
height:auto;
}
ul#navlist
{
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #666666;
margin:0px;
}
ul#navlist li
{
float: left;
height: 21px;
background-color: #DAEBB0;
margin: 2px 2px 0 640px;
border: 1px solid #666666;
}
ul#navlist li#active
{
border-bottom: 1px solid #F8FCF2;
background-color: #F8FCF2;
}
li#active a { color: #000; }
#navlist a
{
float: left;
display: block;
color: #666;
text-decoration: none;
padding:5px;
}
#navlist a:hover { background: #F8FCF2; }
#navcontainer2 {
top:20px;
margin-bottom:20px;
margin-left:15px;
position:relati ve;
width:952px;
}
#gray-background {
background-color:#F8FCF2;
padding-bottom:20px;
height:auto;
}
#gray-background .smbox {
float:left;
border-left:1px solid #666666;
border-right:1px solid #666666;
border-bottom:1px solid #666666;
voice-family:inherit;
background-color:#fff;
width:950px;
}
#navcontainer2 ul#innernavlist
{
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #666666;
margin: 0;
}
#navcontainer2 ul#innernavlist li
{
float: left;
height: 21px;
background-color: #EAF2FF;
margin: 2px 2px 0 2px;
border: 1px solid #666666;
}
#navcontainer2 ul#innernavlist li#active
{
border-bottom: 1px solid #fff;
background-color: #fff;
}
#navcontainer2 li#active a { color: #000; }
#navcontainer2 #innernavlist a
{
float: left;
display: block;
color: #666;
text-decoration: none;
padding:4px;
}
#navcontainer2 #innernavlist a:hover {
text-decoration:unde rline;
}
.clearer{
clear:both;
}
.empsrch{
font-family:Arial,Ve rdana,sans-serif;
font-size:12px;
font-weight:normal;
line-height:15px;
margin:0pt;
}
.empsrch input{
border: 1px solid Gray;
color: #000;
font-size: small;
padding:1px;
margin-right:5px;
}
.empsrch input[type=radio]{
vertical-align:-5px;
}
.empsrch select{
border: 1px solid Gray;
color: Black;
font-size: 12px;
padding:1px;
margin-right:5px;
}
.empsrch a{
color:#777777;
}
.empsrch img{
position:absolu te;
}
.bluetabl{
background: transparent url(../images/tab_m.gif) repeat-x scroll 0%;
float:left;
font-family:arial;
color:#fff;
font-weight:bold;
font-size:11px;
padding:5px 10px;
margin-right:10px;
margin-top:10px;
cursor:pointer;
}
.bluetabr{
background:tran sparent url(../images/tab_r.gif) no-repeat scroll 0%;
width:7px;
height:20px;
}
#addimg{
float:left;
padding-left:20px;
padding-top:20px;
padding-right:10px;
padding-bottom:20px;
}
#addimg input{
border: 1px solid Gray;
color: #000;
font-size: small;
padding:1px;
margin-right:5px;
margin-top:10px;
}
#edetails table{
border:1px solid #7d9de7;
float:left;
margin-top:20px;
width:460px;
padding:1px;
}
#edetails dt,dd{
font-family:arial;
font-size:10px;
color:#666;
padding-bottom:5px;
}
dl, dt, dd {
font-family:arial;
font-size:10px;
color:#666;
margin:0pt;
padding:0pt;
}
#edetails dl{
float:left;
margin-right:10px;
margin-left:20px;
margin-top:20px;
}
#edetails dd {
border-bottom:1px solid #CCCCCC;
width:200px;
margin-bottom:6px;
padding-bottom:6px;
}
#edetails input{
border: 1px solid Gray;
color: #000;
font-size: small;
height:16px;
padding:1px;
}
#edetails select{
border: 1px solid Gray;
color: #000;
font-size: 10px;
height:16px;
padding:1px;
}
#edetails input[type=radio]{
margin-top:10px;
vertical-align:-6px;
}
.opttxt{
padding-bottom:5px;
}
#edetails textarea{
border: 1px solid Gray;
color: #000;
font-size: 12px;
height:50px;
padding:1px;
}
.ltebg{
background-color:#dfe8fd;
}
/* css for grey box */
.box1TopLeft{ba ckground: #EEEDEA url(../images/box2_top_left.g if) top left no-repeat;height:7 px; font-size:1px; padding-left:20px;}
.box1TopRight{b ackground: #EEEDEA url(../images/box2_top_right. gif) top right no-repeat;height:7 px; font-size:1px;}
.box1BtmLeft{ba ckground: #EEEDEA url(../images/box2_btm_left.g if) top left no-repeat;height:7 px; font-size:1px; padding-left:20px;}
.box1BtmRight{b ackground: #EEEDEA url(../images/box2_btm_right. gif) top right no-repeat;height:7 px; font-size:1px;}
.box1Body{backg round-color: #EEEDEA;padding :0px 10px; font-size:0.9em; padding-top:0px; width:auto;}
/* css for table */
#data{
padding:0px 20px 20px 20px;
}
#data table{
border:1px solid #5577bc;
font-family:arial;
font-size:10px;
color:#666;
text-align:center;
}
#data th{
font-size:11px;
font-weight:bold;
background-color:#e2e2e2;
}
#data td{
padding:2px;
}
.altclr{
background-color:#EAF2FF;
}
.naltclr{
background-color:#fff;
}
#data a{
font-family:arial;
font-size:11px;
font-weight:bold;
text-decoration:none ;
}
#data a:hover{
text-decoration:unde rline;
color:#1c47c3;
}
/* CSS FOR LEFT PANEL */
#leftsmpanel{
float:left;
font-family:Arial,Ve rdana,Helvetica ,Sans-serif;
font-size:10px;
font-weight:bold;
border:1px solid #666666;
voice-family:inherit;
background-color:#fff;
margin:10px;
padding:25px 15px 15px 15px;
min-height:400px;
width:200px;
}
#leftsmpanel a{
font-family:Arial,Ve rdana,Helvetica ,Sans-serif;
font-size:11px;
font-weight:bold;
text-decoration:none ;
}
#leftsmpanel a:hover{
text-decoration:unde rline;
}
.txtpad{
padding:5px 0px;
border-bottom:1px solid grey;
}
/* CSS FOR CONTENT PANEL */
.contentbox {
float:left;
border:1px solid #666666;
voice-family:inherit;
background-color:#fff;
margin:10px;
width:700px;
height:400px;
padding:15px;
}
container{
margin: 10px 10px 10px 0px;
}
h2 {
border-bottom:1px solid #CC6600;
float:left;
width:100%;
color:#CC6600;
font-size:17px;
font-weight:bold;
margin-bottom:15px;
padding:0px;
}
.panel{
left:0px;
margin-left:auto;
margin-right:auto;
position:absolu te;
top:0px;
}
.panel .minibox1TopMid {
background:#dfa 955 none repeat-x scroll left top;
border:2px solid #d0cfcf;
height:25px;
overflow:hidden ;
text-align:left;
vertical-align:middle;
}
.panel .minibox1BtmMid {
background:tran sparent url(../images/minibxbtm_m.gif ) repeat-x scroll left bottom;
height:14px;
margin-left:15px;
margin-right:15px;
padding:0px 10px;
}
.panel .edge {
background:#f9f 9f9 url(../images/b_r.gif) repeat scroll right top;
border:medium none;
padding:0pt 2px;
}
.panel .bdr {
font-family:arial;
font-size:11px;
background:#f9f 9f9 none repeat scroll 0% 50%;
border-bottom:2px solid #d0cfcf;
overflow:hidden ;
padding:20px;
text-align:left;
}
.panel .bdr input {
border:1px solid #666;
text-align:left;
padding:1px;
}
.panel .minibox1TopMid span {
color:#FFFFFF;
font-weight:bold;
left:10px;
position:absolu te;
text-transform:upper case;
top:8px;
}
--------------------------------------------------------
please help me!..its urgent...
thanks in advance
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Employee Listing </TITLE>
<META NAME="Generator " CONTENT="EditPl us">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Descripti on" CONTENT="">
<link type="text/css" href="css/styles.css" rel="stylesheet ">
</HEAD>
<BODY>
<div id="topstrip"> </div>
<div id="header">
<div id="container" >
<div id="logo">
</div>
<div id="info">
<a href="#">CHANGE PASSWORD</a>
|
<a href="#">LOGOUT </a>
</div>
</div>
</div>
<div class="breadcru mbs"></div>
<div id="navcontaine r">
<ul id="navlist">
<li><a href="employee. html" id="current">Em ployee</a></li>
<li id="active" style="margin-left:10px;"><a href="admin.htm l">Admin</a></li>
<li style="margin-left:10px;"><a href="events.ht ml">Events</a></li>
<li style="margin-left:10px;"><a href="reports.h tml">Reports</a></li>
</ul>
<div id="gray-background">
<div>
<div id="navcontaine r2">
<ul id="innernavlis t">
<li id="active"><a href="#" id="current">Ma ster Data</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Roles and Rights</a></li>
<li><a href="#">Docume nt Templates</a></li>
</ul>
<div class="smbox">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
</div>
</div>
</BODY>
</HTML>
-------------------------------------------------------------------------
and css is
body {
color:#333333;
font-family:"Trebuch et",Trebuchet,V erdana,Arial,sa ns-serif;
font-size:12px;
margin:0 auto;
}
#topstrip{
height:10px;
/*background-image:url(../images/topheaderbg.jpg );*/
background-color:#99CC66;
border-bottom:1px solid #FFFFFF;
}
#header{
background-color:#FFFFFF;
border-bottom:1px dotted #CCCCCC;
margin:0pt;
padding:0pt 0pt 0pt 30px;
}
#container {
height:55px;
position:relati ve;
width:707px;
}
#logo{
left:0pt;
position:relati ve;
top:10px;
}
img{
border:0pt none;
}
#info{
border:1px solid #A0BDEB;
color:#6699CC;
font-size:10px;
padding:2px 5px 2px 2px;
position:absolu te;
right:0pt;
top:15px;
}
a {
color:#336699;
}
.breadcrumbs{
border-bottom:1px dotted #CCCCCC;
color:#777777;
font-family:Arial,Ve rdana,sans-serif;
font-size:12px;
font-weight:normal;
line-height:15px;
margin:0pt;
height:15px;
padding:5px 5px 3px 40px;
}
#navcontainer {
border-bottom:1px solid #666666;
padding-top:7px;
}
#gray-background {
background-color:#F8FCF2;
padding-bottom:20px;
height:auto;
}
ul#navlist
{
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #666666;
margin:0px;
}
ul#navlist li
{
float: left;
height: 21px;
background-color: #DAEBB0;
margin: 2px 2px 0 640px;
border: 1px solid #666666;
}
ul#navlist li#active
{
border-bottom: 1px solid #F8FCF2;
background-color: #F8FCF2;
}
li#active a { color: #000; }
#navlist a
{
float: left;
display: block;
color: #666;
text-decoration: none;
padding:5px;
}
#navlist a:hover { background: #F8FCF2; }
#navcontainer2 {
top:20px;
margin-bottom:20px;
margin-left:15px;
position:relati ve;
width:952px;
}
#gray-background {
background-color:#F8FCF2;
padding-bottom:20px;
height:auto;
}
#gray-background .smbox {
float:left;
border-left:1px solid #666666;
border-right:1px solid #666666;
border-bottom:1px solid #666666;
voice-family:inherit;
background-color:#fff;
width:950px;
}
#navcontainer2 ul#innernavlist
{
font: bold 11px verdana, arial, sans-serif;
list-style-type: none;
padding-bottom: 24px;
border-bottom: 1px solid #666666;
margin: 0;
}
#navcontainer2 ul#innernavlist li
{
float: left;
height: 21px;
background-color: #EAF2FF;
margin: 2px 2px 0 2px;
border: 1px solid #666666;
}
#navcontainer2 ul#innernavlist li#active
{
border-bottom: 1px solid #fff;
background-color: #fff;
}
#navcontainer2 li#active a { color: #000; }
#navcontainer2 #innernavlist a
{
float: left;
display: block;
color: #666;
text-decoration: none;
padding:4px;
}
#navcontainer2 #innernavlist a:hover {
text-decoration:unde rline;
}
.clearer{
clear:both;
}
.empsrch{
font-family:Arial,Ve rdana,sans-serif;
font-size:12px;
font-weight:normal;
line-height:15px;
margin:0pt;
}
.empsrch input{
border: 1px solid Gray;
color: #000;
font-size: small;
padding:1px;
margin-right:5px;
}
.empsrch input[type=radio]{
vertical-align:-5px;
}
.empsrch select{
border: 1px solid Gray;
color: Black;
font-size: 12px;
padding:1px;
margin-right:5px;
}
.empsrch a{
color:#777777;
}
.empsrch img{
position:absolu te;
}
.bluetabl{
background: transparent url(../images/tab_m.gif) repeat-x scroll 0%;
float:left;
font-family:arial;
color:#fff;
font-weight:bold;
font-size:11px;
padding:5px 10px;
margin-right:10px;
margin-top:10px;
cursor:pointer;
}
.bluetabr{
background:tran sparent url(../images/tab_r.gif) no-repeat scroll 0%;
width:7px;
height:20px;
}
#addimg{
float:left;
padding-left:20px;
padding-top:20px;
padding-right:10px;
padding-bottom:20px;
}
#addimg input{
border: 1px solid Gray;
color: #000;
font-size: small;
padding:1px;
margin-right:5px;
margin-top:10px;
}
#edetails table{
border:1px solid #7d9de7;
float:left;
margin-top:20px;
width:460px;
padding:1px;
}
#edetails dt,dd{
font-family:arial;
font-size:10px;
color:#666;
padding-bottom:5px;
}
dl, dt, dd {
font-family:arial;
font-size:10px;
color:#666;
margin:0pt;
padding:0pt;
}
#edetails dl{
float:left;
margin-right:10px;
margin-left:20px;
margin-top:20px;
}
#edetails dd {
border-bottom:1px solid #CCCCCC;
width:200px;
margin-bottom:6px;
padding-bottom:6px;
}
#edetails input{
border: 1px solid Gray;
color: #000;
font-size: small;
height:16px;
padding:1px;
}
#edetails select{
border: 1px solid Gray;
color: #000;
font-size: 10px;
height:16px;
padding:1px;
}
#edetails input[type=radio]{
margin-top:10px;
vertical-align:-6px;
}
.opttxt{
padding-bottom:5px;
}
#edetails textarea{
border: 1px solid Gray;
color: #000;
font-size: 12px;
height:50px;
padding:1px;
}
.ltebg{
background-color:#dfe8fd;
}
/* css for grey box */
.box1TopLeft{ba ckground: #EEEDEA url(../images/box2_top_left.g if) top left no-repeat;height:7 px; font-size:1px; padding-left:20px;}
.box1TopRight{b ackground: #EEEDEA url(../images/box2_top_right. gif) top right no-repeat;height:7 px; font-size:1px;}
.box1BtmLeft{ba ckground: #EEEDEA url(../images/box2_btm_left.g if) top left no-repeat;height:7 px; font-size:1px; padding-left:20px;}
.box1BtmRight{b ackground: #EEEDEA url(../images/box2_btm_right. gif) top right no-repeat;height:7 px; font-size:1px;}
.box1Body{backg round-color: #EEEDEA;padding :0px 10px; font-size:0.9em; padding-top:0px; width:auto;}
/* css for table */
#data{
padding:0px 20px 20px 20px;
}
#data table{
border:1px solid #5577bc;
font-family:arial;
font-size:10px;
color:#666;
text-align:center;
}
#data th{
font-size:11px;
font-weight:bold;
background-color:#e2e2e2;
}
#data td{
padding:2px;
}
.altclr{
background-color:#EAF2FF;
}
.naltclr{
background-color:#fff;
}
#data a{
font-family:arial;
font-size:11px;
font-weight:bold;
text-decoration:none ;
}
#data a:hover{
text-decoration:unde rline;
color:#1c47c3;
}
/* CSS FOR LEFT PANEL */
#leftsmpanel{
float:left;
font-family:Arial,Ve rdana,Helvetica ,Sans-serif;
font-size:10px;
font-weight:bold;
border:1px solid #666666;
voice-family:inherit;
background-color:#fff;
margin:10px;
padding:25px 15px 15px 15px;
min-height:400px;
width:200px;
}
#leftsmpanel a{
font-family:Arial,Ve rdana,Helvetica ,Sans-serif;
font-size:11px;
font-weight:bold;
text-decoration:none ;
}
#leftsmpanel a:hover{
text-decoration:unde rline;
}
.txtpad{
padding:5px 0px;
border-bottom:1px solid grey;
}
/* CSS FOR CONTENT PANEL */
.contentbox {
float:left;
border:1px solid #666666;
voice-family:inherit;
background-color:#fff;
margin:10px;
width:700px;
height:400px;
padding:15px;
}
container{
margin: 10px 10px 10px 0px;
}
h2 {
border-bottom:1px solid #CC6600;
float:left;
width:100%;
color:#CC6600;
font-size:17px;
font-weight:bold;
margin-bottom:15px;
padding:0px;
}
.panel{
left:0px;
margin-left:auto;
margin-right:auto;
position:absolu te;
top:0px;
}
.panel .minibox1TopMid {
background:#dfa 955 none repeat-x scroll left top;
border:2px solid #d0cfcf;
height:25px;
overflow:hidden ;
text-align:left;
vertical-align:middle;
}
.panel .minibox1BtmMid {
background:tran sparent url(../images/minibxbtm_m.gif ) repeat-x scroll left bottom;
height:14px;
margin-left:15px;
margin-right:15px;
padding:0px 10px;
}
.panel .edge {
background:#f9f 9f9 url(../images/b_r.gif) repeat scroll right top;
border:medium none;
padding:0pt 2px;
}
.panel .bdr {
font-family:arial;
font-size:11px;
background:#f9f 9f9 none repeat scroll 0% 50%;
border-bottom:2px solid #d0cfcf;
overflow:hidden ;
padding:20px;
text-align:left;
}
.panel .bdr input {
border:1px solid #666;
text-align:left;
padding:1px;
}
.panel .minibox1TopMid span {
color:#FFFFFF;
font-weight:bold;
left:10px;
position:absolu te;
text-transform:upper case;
top:8px;
}
--------------------------------------------------------
please help me!..its urgent...
thanks in advance
Comment