Nested div content overflows

Discussion in 'HTML & Website Design' started by strifer, Aug 5, 2006.

0
  1. #1
    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!
     
    strifer, Aug 5, 2006 IP
  2. haircorn

    haircorn Peon

    Messages:
    14
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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>
     
    haircorn, Aug 5, 2006 IP
  3. strifer

    strifer Guest

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    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?
     
    strifer, Aug 5, 2006 IP