Another DIV Height Problem; Elements Overlapping DIV

[rockyroad]

Hi

What I am trying to accomplish is all the elements in the header NOT overalpping the container DIV.

Here is my code:

<div style="min-height:50px; height:auto !important; height:50px; background-image:url(../images/Head_BG_02.jpg); background-repeat:repeat-x; background-position:bottom; background-color:#000000; color:#CCCCCC; position:relative; font-size:150%;">

<img src="../images/Head_Logo.jpg" align="left" / style="padding-right:12px; ">
	
<div style="padding:0; margin:0; position:relative;">

<form action="destination.htm" style="padding:0; margin:0; ">

<div style="padding:0; margin:0; float:left;">
<label for="name">Find</label> <input type="text" id="name" class="input-box" value="find" />
<input type="submit" value="GO" class="submit-button" />
</div>
			
<div style="padding:0; margin:0; float:left;">
<img src="../images/Globe.gif" align="left" style="padding-right:5px;">
<a href="#">Global</a>
</div>
			
</form> 

</div>

</div>

...when text size is too large, my elements overalp the DIV ... what am I doing wrong here?

Thanks

RR

 

[BabyJeffy]

Suggest you stop using pixels and use something that will scale as the text size scales (em, %). Maybe look at moving all those ugly inline CSS declarations into a single block of CSS (in the HEAD section of the document, maybe) to help clarify your markup.

You ought to define a doctype and validate the HTML document against this doctype at their online validator sevice:

http://validator.w3.org

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094