Prevent elements from wrapping

[FesterSXS]

In the header section of my page I have a logo in the top left and a search facility in the top right. The page is fluid and works fine when the window is made wide. However, when the page is made narrow, the search facility wraps beneath the logo.

How can I prevent this and keep them side by side?

I have posted the relevant bits of code below

#upper_header		{margin: 0px; height: 36px; background-image: url('../images/blue_back.gif'); background-color: #330099;}

img.spiraxlogo		{float: left; margin: 5px 20px 5px 5px;}

form.topsearchfrm	{float: right; white-space: nowrap; margin: 5px 2px 5px auto;}
input.topsearch		{width: 200px;}
input.topsearchbtn	{width: 100px; margin: 2px 20px 0px 0px;}

<div id="upper_header">
<a href="[URL unfurl="true"]http://www.SpiraxSarco.com"><img[/URL] src="<%=strSitePath%>images/spiraxlogo.gif" width="100" height="26" border="0" class="spiraxlogo" alt="[URL unfurl="true"]www.SpiraxSarco.com"[/URL] /></a>

<form action="default.asp" method="post" class="topsearchfrm">
<input type="text" size="30" class="topsearch" />
<input type="submit" value="Search" class="topsearchbtn" />
<a href="#" class="advsearch">Advanced Search</a>
</form>
</div>

Many thanks

Tony
________________________________________________________________________________

http://www.SpiraxSarco.com

 

[Vragabond]

Floated elements will always fall under if there is not enough space to accomodate them. Try giving your div a min-width to prevent it from being shrunk to the point where they fall one below the other or make everything in percentage (the logo and search -- I guess not a good idea).

#upper_header {
  margin: 0px;
  height: 36px;
  background-image: url('../images/blue_back.gif');
  background-color: #330099;
  min-width: 300px; /* for smart browsers */
  width: expression(document.body.clientWidth < 300? "300px": "100%" ); /* for IE, others will ignore */
}

 

[FesterSXS]

Thanks for pointing that out.

I tried the above and it is crashing IE6 whenever I resize the window to the min-width. Have you heard of this happening?

Tony
________________________________________________________________________________

http://www.SpiraxSarco.com

 

[Vragabond]

Actually, I have. Though I have never found out what the problem is since it worked fine with my test page. Might be form elements. Do you have a very simple page demonstrating this problem?

 

[FesterSXS]

I've just uploaded the site template to the following temporary address for you to see:

http://www.phoenix-paints.co.uk/default.asp

Tony
________________________________________________________________________________

http://www.SpiraxSarco.com