Input with display:block is not a block, why not?

by

Check out what I came up with, a solution using the relatively unknown box-sizing:border-box style from CSS 3. This allows a ‘true’ 100% width on any element regardless of that elements’ padding and/or borders.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <title>Cross-browser CSS box-sizing:border-box</title>

        <style type="text/css">
            form {display:block; margin:0; padding:0; width:50%; border:1px solid green; overflow:visible}
            div, input {display:block; border:1px solid red; padding:5px; width:100%; font:normal 12px Arial}

            /* The voodoo starts here */
            .bb {
                box-sizing: border-box; /* CSS 3 rec */
                -moz-box-sizing: border-box; /* Firefox 2 */
                -ms-box-sizing: border-box; /* Internet Explorer 8 */
                -webkit-box-sizing: border-box; /* Safari 3 */
                -khtml-box-sizing: border-box; /* Konqueror */
            }
        </style>

        <!-- The voodoo gets scary. Force Internet Explorer 6 and Internet Explorer 7 to support Internet Explorer 5's box model -->
        <!--[if lt IE 8]><style>.bb {behavior:url("boxsizing.htc");}</style><![endif]-->
    </head>

    <body>
        <form name="foo" action="#">
            <div class="bb">div</div>
            <input class="bb" size="20" name="bar" value="field">
        </form>
    </body>
</html>

This solution supports Internet Explorer 6 and Internet Explorer 7 via a behaviour written by Erik Arvidsson with some tweaks from Dean Edwards to support percentage and other non-pixel widths.

Working example
Behaviour (boxsizing.htc)

More Related Contents:

  1. How to make moving CSS objects like this?
  2. Menu does not align correctly in Safari
  3. how to align the image to the center? [closed]
  4. Proper use of flex properties when nesting flex containers
  5. How can I override Bootstrap CSS styles?
  6. Nesting block level elements inside the tag… right or wrong?
  7. Bootstrap full-width with 2 different backgrounds (and 2 columns)
  8. How can I expand floated child div’s height to parent’s height?
  9. Minimum and maximum value of z-index?
  10. Is it possible to put CSS @media rules inline?
  11. Applying a background to and/or
  12. Adding HTML entities using CSS content
  13. How can I find an element by CSS class with XPath?
  14. Should I use px or rem value units in my CSS? [closed]
  15. Using flex order property to re-arrange items for desktop and mobile views
  16. What characters can be used for up/down triangle (arrow without stem) for display in HTML?
  17. Centering a div block without the width
  18. How can I print background images in FF or IE?
  19. CSS :first-letter not working
  20. Multiple Spaces Between Words in HTML without  
  21. Margin while printing html page
  22. CSS Transition – eases in but doesn’t ease out?
  23. CSS image resize percentage of itself?
  24. Fixed Header, Footer, and Sidebars with scrolling content area in center
  25. Specifying Tab-Width?
  26. Is there a way to tell browsers to honor the jpeg exif orientation?
  27. CSS hide scroll bar if not needed
  28. The css padding is not working in outlook
  29. Change image on hover
  30. Why does a border increase the element’s width?

Leave a Comment