mds1256 Posted September 14, 2010 Share Posted September 14, 2010 Hi I have a header div on my website that spans the whole window. Within the header i have 2 further divs, one called text (which is floated to the left) and one called form (which is floated to the right). Within the text div i have a sentence (something like; welcome to my site guest). And in the form div i have 2 text fields and a login button. This looks spot on when window is maximised but when window is made smaller the form text fields wrap around the text that is floated on the left. What i need to acheive is when the window is made smaller the text fields will butt up against the text (on the same line and not wrap) and both text fields need to stay inline and not wrap. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> body{ margin:0 0 0 0; } #header{ background:#999999; height:30px; width:100%; } #text{ float:left; width:200px; } #form{ float:right; width:360px; } </style> </head> <body> <div id="header"> <div id="text">Welcome to my site Guest</div> <div id="form"><input name="username" type="text" /><input name="password" type="text" /><input name="Submit" type="submit" value="Submit" /></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
mds1256 Posted September 14, 2010 Author Share Posted September 14, 2010 Sorted - used "min-width:" and a fix for IE6 using java script expression Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.