Hello I have a wrapper div with red background. Inside are two nested divs with blue background, each with an input field. The first input field is shorter than the second. When resizing the browser window to a smaller width than the div's content, the input fields either overflow past the right edge (firefox) or the inner div with the shorter input field moves to the left, revealing the wrapper div's red background (IE). Check this code to see what I mean: <html> <head> <title>Test</title> <style tyle='text/css'> .wrapper {width:50%; border:1px solid black; color:inherit; background:#FF0000} .inner_div {color:inherit; background:#E0ECFF} </style> </head> <body> <div class='wrapper'> <div class='inner_div'><input type='text' style='width:300px' /></div> <div class='inner_div'><input type='text' style='width:400px' /></div> </div> </body> </html> HTML: What I want is that the content of the inner divs doesn't overflow. Thanks a lot for any input!
The over flow is easy, min-width:410px; in your div style, so firefox will stop shrinking the div at that point. There are some ie fixes for min width you can find by searching. If the center border is not needed, I would just use 1 div with some spans around the fields. Then maybe a hr for an inner boarder like below. The hr doesn't have a min. width in ie and would need the ie fix added, but overall works in both firefox and ie. <html><head><title>Test</title> <style tyle='text/css'> .wrapper {min-width:420px;border:1px solid black; color:inherit; background:#FF0000} .inner_div {min-width:420px; margin: 1px; color:inherit; background:#E0ECFF} </style></head> <body><div class='wrapper'> <div class='inner_div'> <span style="width:100%;"><input type='text' style='width:300px; margin: 5px; padding: 0px;' /></span><br /> <hr style="padding: 0px; margin: 0px; color: #f00; background-color: #f00; height: 3px; "> <span style="width:100%;"><input type='text' style='width:400px; margin: 5px; padding: 0px;' /></span></div> </div> </body> </html>
Ok thanks for the min-width thing, completely forgot about that one. This fixes the problem with firefox, however in IE the inner div with the shorter input field still reveals the red background of the wrapper (alas spans are not an option, this is only a simplified example, but the 'real world' app needs the divs). The code looks now like this. If you save it as html file and view it in your browser you'll see exactly what I mean: <html> <head> <title>Test</title> <style tyle='text/css'> .wrapper {min-width:400px; width:50%; border:1px solid black; color:inherit; background:#FF0000} .inner_div {min-width:400px; color:inherit; background:#E0ECFF} </style> </head> <body> <div class='wrapper'> <div class='inner_div'><input type='text' style='width:300px' /></div> <div class='inner_div'><input type='text' style='width:400px' /></div> </div> </body> </html> HTML: So min-width works fine for predefined content where I know its width in advance, but what about dynamically created content? I guess the only way is to determine the min-width dynamically, too?