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

DIV behind another DIV

100+
P: 384
I have the below code, when a user clicks on the
Expand|Select|Wrap|Line Numbers
  1. <a href="#" onclick="showhide('languages'); return false;">Language(<div id="current_lang">en</div>)</a>
it shows a DIV that is hidden and when clicked again the DIV hides again, that works fine, my problem is that the DIV that is showen when a user clicks on the link is hidden behind the next DIV 'top_wrapper_bottom', can anyone suggest a way to solve this?
Expand|Select|Wrap|Line Numbers
  1. <div id="top_wrapper_top">
  2.             <div id="top_left_wrapper"><a href="../index/"><img src="../images/layout/people.png" border="0" width="300px" height="60px" title="" alt="" /></a></div>
  3.             <div id="top_right_wrapper">
  4.                 <!-- Top Section Search Start -->
  5.  
  6.                 <div id="top_search_wrapper">
  7.                     <div id="top_search_field"><input type="text" id="search" name="search" size="25" /></div>
  8.                     <div id="top_search_label"><label>Search:</label></div>
  9.                 </div>
  10.                 <!-- Top Section Search End -->
  11.                 <!-- Top Section Links Start -->
  12.                 <div id="top_links_wrapper">
  13.                     <div id="top_links_internal_wrapper">
  14.  
  15.                         <div class="top_links"><a href="../admin/">Administration</a> | <a href="../profile-1/">Profile</a> | <a href="#" onclick="logout(); return false;">Logout</a> | <a href="#" onclick="showhide('languages'); return false;">Language(<div id="current_lang">en</div>)</a>
  16.                         </div>
  17.                         <div id="languages">lanuages</div>
  18.  
  19.                     </div>
  20.                 </div>
  21.                 <!-- Top Section Links End -->
  22.             </div>
  23.         </div>
  24.                 <div id="top_wrapper_bottom">
  25.             &nbsp;
  26.         </div>
  27.  
  28.  
Feb 25 '09 #1
Share this Question
Share on Google+
2 Replies

drhowarddrfine
Expert 5K+
P: 7,435
Not enough information to help. Need the complete markup including the css and javascript. Do you have this online so you can give us a link?
Feb 26 '09 #2

P: 1
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>
Feb 28 '09 #3

Post your reply

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