Jump to content

Stop Div's Wrapping


mds1256

Recommended Posts

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>

Link to comment
https://forums.phpfreaks.com/topic/213400-stop-divs-wrapping/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.