Hi
I'm facing problem with divs. I have a main div and with in this div I have some other divs.
The problem is I'm unable to fix the height of inner div.
Actually the inner div should take the height according to the content with in it.
But in my case the div height is exceeding the content height.
You can find the actual page here:
http://www.ranganpalke.com/testpage.htm
The problematic div is with yellow background color.
The problem exists with IE7 and FireFox (IE6 shows as expected)
Thank you very much
(The html is as below)
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title>
<style type="text/css">
body {
margin:0px 30px 0px 30px;
padding:0 ;
background:#e5e5e5;
color:#000;
font-family:Verdana;
font-size:13px;
}
#container {
background:#ffffff;
width:956px;
border:1px solid #000;
}
#header {
/*border-bottom:1px solid red;*/
background:#CD0000;
text-align:center;
height:75px;
width:956px;
}
#headersearchbox{
position:absolute;
left:300px;
top:20px;
width:400px;
}
.topbandgraybg
{
background-color:#e5e5e5;
text-align:center;
padding:5px 0px 5px 0px;
width:956px;
}
#left {
margin-left:-199px;/* must be 1 pixel less than width*/
float:left;
width:200px;/* must be same as left margin on #middle*/
position:relative;
left:-3px;/* line up exactly */
display:inline;/* ie fix*/
background:#ffffff;
}
#right {
margin-right:-365px;/* must be 1 pixel less than width*/
float:right;
width:365px;/* must be same as right margin on #middle*/
position:relative;
right:-3px;/* line up */
display:inline;/* ie fix*/
}
#viewquestionleft {
margin-left:-239px;/* must be 1 pixel less than width*/
float:left;
width:240px;/* must be same as left margin on #middle*/
position:relative;
left:-3px;/* line up exactly */
display:inline;/* ie fix*/
background:#ffffff;
}
#viewquestionmiddle {
background:#ffffff;
margin-left:240px;
margin-right:5px;
margin-top:10px;
}
* html #left{margin-right:-3px;}/* 3 pixel jog*/
* html #right{margin-left:-3px;}/* 3 pixel jog*/
#middle {
background:#ffffff;
margin-left:200px;
margin-right:365px;
margin-top:10px;
}
* html #centre{overflow:hidden;float:left;width:100%;}
* html .centre1{overflow:hidden;float:left;width:100%;bac kground:#FFFFDB;border:solid 1px #e5e5e5;}
* html #centre2{overflow:hidden;float:left;width:100%;bac kground:#FFFFDB;border:solid 1px #e5e5e5;}
* html .centre3{overflow:hidden;float:left;width:100%;bac kground:#e5e5e5;}
* html .centre4{overflow:hidden;float:left;width:100%;bac kground:#ffffff;}
* html .centre5{overflow:hidden;float:left;width:100%;bac kground:#FFFFDB;border:solid 1px #A1BA5C;}
* html #middle {height:1%;}
#footer {
width : 957px;
clear:both;
border-top:1px solid red;
border-bottom:1px solid red;
height:50px;
background:#CD0000;
text-align:center;
color:White;
font-weight:bold;
}
h1,h3,p {margin-top:0}
.clearer{
height:1px;
overflow:hidden;
margin-top:-1px;
clear:both;
}
.fontwhite
{
color:White;
}
h4
{
text-align:center;
margin-top:0px;
}
h5
{
margin-top:0px;
margin-bottom:10px;
text-align:left;
padding-left:5px;
}
#leftcolumn, #rightcolumn,#middlecolumn
{
margin:0px 5px;
}
.categories
{
margin:5px;
}
.categoriesband
{
background-color:#73A3D4;
width:100%;
height:20px;
}
.imagestyle
{
float:left;
padding-left:10px;
}
.questionbold
{
font-weight:bold;
}
#requestband
{
width:956px;
background-color:#98CB6C;
color:White;
}
#myrequesttab
{
border:solid 1px black;
width:48%;
background-color:#73A3D4;
color:White;
font-weight:bold;
}
#myresponsestab
{
border:solid 1px black;
width:53%;
background-color:#CACACA;
color:White;
font-weight:bold;
}
.viewquestionmiddle1 {
background:#FFFFDB;
margin-left:35px;
margin-right:5px;
margin-top:10px;
}
.viewquestionmiddle2 {
background:#ffffff;
margin-left:35px;
margin-right:5px;
margin-top:10px;
}
.viewquestionmiddle3 {
background:#EBF1FF;
margin-left:35px;
margin-right:5px;
margin-top:10px;
}
</style>
</head>
<body>
<div id="container" style="border: solid 2px yellow;">
<div id="viewquestionmiddle">
<div id="viewquestionleft" style="left: -1px; top: 0px">
<div id="leftcolumn" style="border: solid 1px red;">
<div>
<ul>
<li class="questionbold">Which country is the burmuda part of?</li>
</ul>
<p style="padding-left: 20px;">
<img src="images45/Q.gif" style="float: left;" />
Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible
Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible
</p>
<span style="padding-left: 90px;"><a href="#">See full response</a></span>
</div>
</div>
</div>
<div class="centre1" id="specialcase">
<div class="viewquestionmiddle1">
<div style="width: 50px; float: left;">
<img src="images45/photo1.gif" /><br />
Madonna Walker
</div>
<div style="float: left; padding-left: 20px; width: 550px;">
<span class="questionbold">Which country is the Bermuda part of? Which country is the
Bermuda part of? </span>
<br />
<span style="padding-left: 26px;">- 3months ago, Resolved question</span>
</div>
<div style="clear: left;">
</div>
</div>
</div>
</div>
<div id="footer">
© 2009 Copy Rights
</div>
</div>
</body>
</html>
384
