473,395 Members | 1,670 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,395 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 5132
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

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

Similar topics

1
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...
0
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
1
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...
2
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...
3
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. ...
3
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...
4
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'...
2
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...
1
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...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
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,...
0
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...
0
Oralloy
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,...
0
jinu1996
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...
0
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...

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.