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

Subscribe Post Reply

5131

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

by: Glabbeek | last post by:

I'm changing the layout of my site. Instead of using tables, I will use DIVs. It's working fine, except for 1 thing: In IE6 some DIVs are not the correct width. Mozilla and Opera are showing the...

HTML / CSS

Problem with div height

by: nunomaltez | last post by:

Hi, I have a problem with the following page: http://nmfm.freezope.org/help (I pasted the source below as well) I'd like to achieve with <div>s and CSS (first set of boxes on that

HTML / CSS

select element and scrollbar in mozilla overflow auto

by: Marek Mänd | last post by:

<select multiple style="height:200px;"> <option>a <option>b </select> Why does Mozilla draw the vertical scrollbar to the SELECT html element? There is plenty of void room below two OPTIONs in...

HTML / CSS

auto table row height

by: Marek Mänd | last post by:

I have problems with table row height by Internet Explorer6 in xhtml1 css1compat mode document. The table has fixed height and on one TFOOT row the height is set to 'auto' to make it have...

HTML / CSS

Auto height for div is correct only when images do not float

by: inkswamp | last post by:

I've been using CSS for quite a while now but I have yet to master its eccentricities. Here's something I recently ran across and if someone could explain why this happens, I would appreciate it. ...

HTML / CSS

CSS height expanding inner DIV

by: ryanmhuc | last post by:

What I would like is to create an inner div (inner1) which will expand vertically (or the height) to its outer div container (outer). The outer div does not have a set height but will expand when...

HTML / CSS

overflow:auto (or scoll) and height:100%

by: reycri | last post by:

I have a page that works as I intend in IE but not in Firefox: <html> <head> <title>Overflow Test</title> </head> <body style='overflow:hidden; margin:0; padding:0;'> <table border='0'...

HTML / CSS

Firefox and retrieving height set to "auto"

by: Piotr K | last post by:

Hi, I've encountered a strange problem with Firefox which I don't have any idea how to resolve. To the point: I've <divelement with a style "height: auto" and I want to retrieve this value...

Javascript

Content Div Auto Height

by: neridaj | last post by:

Hello, I've found a few postings of this problem but none of the answers seem to fix my problem. I have a content div wrapped around a left floated image and a right floated table. I want the...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Auto height problem to outer div

Similar topics