Home/ Questions/Q 6951179
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T14:11:12+00:00

I’m developing something in asp.net and finally got round to creating the UI. I

  • 0

I’m developing something in asp.net and finally got round to creating the UI. I made a basic <div> element to wrap the content of my body in, and I notice that it auto fills the width to 100%. I create a new .aspx page to test it in, and the same results happen. So I create the following HTML document in notepad, save it as test.html and run it through Chrome, IE and Firefox and all three are returning a strip of 20px high and 100% width with a red background. Here’s the code: 

<head>
    <style type="text/css">
        #tester
        {
            height: 20px;
            background-color: Red;
            border: 1px;
        }
    </style>
</head>

<body>
    <div id="tester">

    </div>
</body>

Would anyone know what I could have done to make this so that it auto fills div elements to width: 100% on all browsers? I guess it’s possible that I’m being absent minded and forgot that div elements did this automatically, but I’m 99% sure they didn’t.

Thank you kindly,
Ben

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    From CSS 101 (BSD/MIT licences):

    The horizontal position and size of a non-floating, block-level element is determined by seven properties:

    • margin-left
    • border-left
    • padding-left
    • width
    • padding-right
    • border-right
    • margin-right

    The sum of these seven properties is always equal to the ‘width’ of the parent element.

    So yes, you’ve been absent-minded! Block-level elements (such as div) automatically fill the width of their parent unless they’ve been told not to by float.

    • 0