Forum Moderators: not2easy
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 {border:1px solid black; color:inherit; background:#FF0000}
.inner_div {margin:1px; padding:5px 10px 5px 10px; 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>
What I want is that the content of the inner divs doesn't overflow.
Thanks a lot for any input!
is this what you had in mind?
