Auto height problem to outer div

18 New Member

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

Jan 17 '08 #1

Subscribe Reply

5166

harshmaul

490

Recognized Expert Contributor

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

Similar topics

13958

Problem with the width of DIV in IE6 using CSS and width:auto

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 page the way I want. Does anybody know a solution for this? First of all, the code I am using: CSS ------- body {

HTML / CSS

2840

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

23222

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 the SELECT box, so there is no need for that. How do i get the overflow:auto like thing working in mozilla based

HTML / CSS

15907

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 flexible height, which will shrink if there are more rows in TBODY and which will grow if there are fewer rows in TBODY. However IE6 has huge troubles with this simple concept and doesnt seem want to make the auto-heighted row to behave as auto...

HTML / CSS

14231

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. I've included code below. The code produces three divs, each with height set to "auto." Within each div is an image. If I float the image left or right, the height of the box does not accommodate the height of the image automatically. If I don't...

HTML / CSS

5310

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 another div (inner2) inside outer expands vertically with content. I cannot seem to get a div to expand vertically when the outer div is NOT set to expand 100%. Anyone know how to do this. I've placed the code below. <style type="text/css">...

HTML / CSS

12539

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' cellpadding='0' cellspacing='0' style='border-collapse:collapse; width:100%; height:100%;'> <tr><td colspan='2' style='height:3em; border-bottom:1px solid

HTML / CSS

3079

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 ("auto") in JavaScript - however instead of getting "auto" value, I get calculated height. In IE and Opera it simply returns "auto". Any ideas how to check in Firefox if element height was set to "auto" ? I'll be grateful for any help.

Javascript

2980

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 table to dictate the height to the content div instead of popping out of the bottom of the content div. Seems pretty simple but too complicated for me I guess. If you know how to achieve this please share. Thanks, J /*begin code*/

HTML / CSS

9255

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10014

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

9819

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9689

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8688

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

5119

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5289

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3780

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2647

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General