Display div directly underneath textbox

[biggieuk]

Hi all,

 

I have a textbox(with an arrow image on the end so it acts a dropdown list). The textbox is currently floated left as is the arrow so they line up horizontally.

 

When the arrow is selected i want a hidden div of 200 x 200px to display underneath this textbox but it is currently to the right of the textbox.

 

The div box is set to absolute positioning so that it displays over all the other content on the page under the textbox.

 

Does anybody have any ideas as to how i can get this div box to display directly underneath my textbox so it acts like a dropdown?

 

thanks very much.

 

 

[biggieuk]

I've attatched an example to make it easier.

 

[haku]

Are you expecting us to guess what your code is?

[biggieuk]

The textbox is currently floated left as is the arrow so they line up horizontally.

 

Thats pretty much it but heres therest of my code.

 

.dropdowntextbox { //This is the textbox
	  font-size: 10px;
	  font-family:Arial;
	  width : 121px;
	  height:17px;
	  font-weight:normal; 
	  background-color:#E8DFEB; 
	  padding : 1px;
	  border:#7F9DB9 solid 1px;
	  border-right:none;
	  color:#000000; 
	  float:left;	
	  font-family:Verdana; 
}

.btnList {  // This is the button floated left next to it.
	  width : 22px;
	  height:17px;
	  background-color:#E8DFEB; 
	  padding : 1px 1px 1px 3px;
	  border:#7F9DB9 solid 1px;
	  border-left:none;
	  color:#000000;
	  font-weight:bold; 
	  float:left;
	  cursor:pointer;
	  overflow:hidden;
}

#dropdownwindow {  //  This is the dropdown window that hides/shows
	width:300px;
	height:265px; 		 
	background-color:#FDFBFF;
	border:1px solid #D2D2D2; 
	border-bottom:none;
	position:absolute;
	z-index:1000;
	display:none;
	float:left;			
}

 

 

my html:

 

<div class="inputContainer">  <! --  Around the whole thing -->
<input type="text" name="txtMedia" id="txtMedia" class="dropdowntextbox" onkeyup="search_delay(this, this.value);" onClick="make_blank(this.id,'Search Media');" value="Search Media" /><div class="btnList" onClick="btn_search();"><img src="../applications/dropdown/images/down.gif" width="16" height="16"/></div>



<div id="dropdownwindow" style="display:none;">	
....
..

</div>
</div> <!-- Close inputContainer --> 	

 

thanks.

[dzelenika]

Try

 

clear: left;

 

for second div

[biggieuk]

Yeh that worked perfectly.

 

thanks very much

[haku]

And that's why it's always good to show your code!