471,852 Members | 1,413 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,852 software developers and data experts.

Auto height problem to outer div

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="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" 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="breadcrumbs"></div>

<div id="navcontainer">
<ul id="navlist">
<li><a href="employee.html" id="current">Employee</a></li>
<li id="active" style="margin-left:10px;"><a href="admin.html">Admin</a></li>
<li style="margin-left:10px;"><a href="events.html">Events</a></li>
<li style="margin-left:10px;"><a href="reports.html">Reports</a></li>
</ul>
<div id="gray-background">
<div>
<div id="navcontainer2">
<ul id="innernavlist">
<li id="active"><a href="#" id="current">Master Data</a></li>
<li><a href="#">Users</a></li>
<li><a href="#">Roles and Rights</a></li>
<li><a href="#">Document 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:"Trebuchet",Trebuchet,Verdana,Arial,sans-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:relative;
width:707px;
}

#logo{

left:0pt;
position:relative;
top:10px;
}

img{
border:0pt none;
}


#info{

border:1px solid #A0BDEB;
color:#6699CC;
font-size:10px;
padding:2px 5px 2px 2px;
position:absolute;
right:0pt;
top:15px;
}

a {
color:#336699;
}

.breadcrumbs{
border-bottom:1px dotted #CCCCCC;
color:#777777;
font-family:Arial,Verdana,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:relative;
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:underline;
}

.clearer{
clear:both;
}

.empsrch{

font-family:Arial,Verdana,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:absolute;
}

.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:transparent 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{background: #EEEDEA url(../images/box2_top_left.gif) top left no-repeat;height:7px; font-size:1px; padding-left:20px;}
.box1TopRight{background: #EEEDEA url(../images/box2_top_right.gif) top right no-repeat;height:7px; font-size:1px;}
.box1BtmLeft{background: #EEEDEA url(../images/box2_btm_left.gif) top left no-repeat;height:7px; font-size:1px; padding-left:20px;}
.box1BtmRight{background: #EEEDEA url(../images/box2_btm_right.gif) top right no-repeat;height:7px; font-size:1px;}
.box1Body{background-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:underline;
color:#1c47c3;
}

/* CSS FOR LEFT PANEL */

#leftsmpanel{

float:left;
font-family:Arial,Verdana,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,Verdana,Helvetica,Sans-serif;
font-size:11px;
font-weight:bold;
text-decoration:none;
}

#leftsmpanel a:hover{
text-decoration:underline;
}

.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:absolute;
top:0px;
}

.panel .minibox1TopMid{
background:#dfa955 none repeat-x scroll left top;
border:2px solid #d0cfcf;
height:25px;

overflow:hidden;
text-align:left;
vertical-align:middle;
}

.panel .minibox1BtmMid{
background:transparent url(../images/minibxbtm_m.gif) repeat-x scroll left bottom;

height:14px;
margin-left:15px;
margin-right:15px;
padding:0px 10px;

}

.panel .edge {
background:#f9f9f9 url(../images/b_r.gif) repeat scroll right top;
border:medium none;
padding:0pt 2px;
}

.panel .bdr {
font-family:arial;
font-size:11px;
background:#f9f9f9 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:absolute;
text-transform:uppercase;
top:8px;
}

--------------------------------------------------------

please help me!..its urgent...
thanks in advance
Jan 17 '08 #1
1 4969
harshmaul
490 Expert 256MB
2 things...

Firstly validate your code at w3c. you've got a few errors in there


secondly this item....

#gray-background .smbox

has float left, take this out for correct workings.
Jan 25 '08 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

reply views Thread by nunomaltez | last post: by
2 posts views Thread by Marek Mänd | last post: by
3 posts views Thread by ryanmhuc | last post: by
4 posts views Thread by reycri | last post: by
2 posts views Thread by Piotr K | last post: by
1 post views Thread by neridaj | last post: by
NeoPa
reply views Thread by NeoPa | last post: by
reply views Thread by YellowAndGreen | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.