By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
454,622 Members | 1,154 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 454,622 IT Pros & Developers. It's quick & easy.

Auto height problem to outer div

P: 18
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
Share this Question
Share on Google+
1 Reply


harshmaul
Expert 100+
P: 490
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.