css float “squeeze” elements when page width is small

Question

Is there a way to float two elements next to each other in the same container without the right-most element getting squeezed down below when the window size is reduced? Instead, I would like the right element to be covered by the window.

here's the css:

#logo {
margin-left: 400px;
float:left; 
}

#loginbox {
margin-top: 15px;
float:left;
height: 70px;
width: 375px; 
}

and the html

<div class="header">
        <div id='logo'>
            <img id='logo-img' src='graphics/banner2.png' alt='Logo' height=200px width=700x />
        </div>
        <div id='loginbox' class='login'>
            <form id='login' >
                <span style="font-weight: bold; color: red;">Login</span>
                <br />
                <br />
                <input type="text" id='login-email' value='email' />
                <input type='text' id='login-password' value='password' />
                <input type='submit' value='login'/>
            </form>
        </div>
        <br style='clear:both' />
    </div><!-- end header -->

thanks!!

Answer 1

You need to set a hard width for the header and for the cells:

http://jsfiddle.net/ByWM2/

<div class="header">
        <div id='logo'>
            <img id='logo-img' src='graphics/banner2.png' alt='Logo' />
        </div>
        <div id='loginbox' class='login'>
            <form id='login' >
                <span style="font-weight: bold; color: red;">Login</span>
                <br />
                <br />
                <input type="text" id='login-email' value='email' />
                <input type='text' id='login-password' value='password' />
                <input type='submit' value='login'/>
            </form>
        </div>
    </div><!-- end header -->​

.header { width:700px; overflow:hidden; }

#logo {
background:lime;
min-width:300px;
float:left; 
}

#loginbox {
background:cyan;
float:left;
height: 70px;
min-width: 400pxpx; 
}​

Answer 2

You can set a min-width for #loginbox :

#loginbox {
  margin-top: 15px;
  float:left;
  height: 70px;
  min-width: 200px; /* set this to the max width you'd like it to squeeze to */
  width: 375px; 
}

Answer 3

Put an enclosing <div></div> of height: 70px or whatever the largest of the two floats is, and then set it to have a min-width: 200px; or, again, whatever width you want the minimum to be.

Hope this helps.

Answer 4

soln 1: Set width or min-width on the container (header) equal to or greater than the widths of the 2 divs if those 2 are both of known width. You don't have a width on #logo, but I would normally presume a logo has a reliable (ie constant) width.

 #header{width: 900px; /*or whatever*/}

soln 2: use css3 properties (requires IE9+ or one of the cool browsers: http://caniuse.com/#feat=css-table ):

 #header{display:table}
 #logo, #loginbox{display:table-cell}

Answer 5

there are a few ways to solve this problem, here's one:

Assuming the left column's width is known, you can set the right column to position absolute and set its margin left to the width of the left column's width so it will position properly. you also have to set the position of the parent div to relative in order for this to work. here's the fiddle:

http://jsfiddle.net/JKXrV/1/