Home/ Questions/Q 8916439
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T05:14:35+00:00

I have an outer div element called container and two inner div elements called

  • 0

I have an outer div element called container and two inner div elements called firstDiv and secondDiv

the firstDiv will be floating to the left, while the secondDiv will be floating to the right.

I would like the outer div element to take as much width as possible, which means 100% of the available width.

I would also like the two inner elements to take half space, which means 50% of the container div.

Here is some basic code for this:

<html>
    <head>
    
    <style type="text/css">
        #container{
            width:100%;
            height:100%;
            border-style:solid;
        }
    </style>
    </head>
    
    <body>
        <div id="container">
            <div id="firstDiv"> </div>
            <div id="secondDiv"> </div>
        </div>
    </body>
</html>

Question 1

I was expecting a simple solid border to surround the body element, which it seemed like it did, however I got a scroll bar on the y dimension of my browser. Why did this happen? I said I want 100% of body’s width and height, and it seems like the browser used more than that.

Now I added the following CSS code:

    #firstDiv{
        width:50%;
        height:100%;
        border-style:solid;
        }

Question 2
it seems like the div takes 50% of the "container" div, however the height seems to be more than 100%. Why did this happen? Picture:
enter image description here

I do the same for the second div and include the float properties by having the following CSS code:

    #container{
        width:100%;
        height:100%;
        border-style:solid;
    }
    #firstDiv{
        width:50%;
        height:100%;
        border-style:solid;
        float:left;
        }
    #secondDiv{
        width:45%;
        height:100%;
        border-style:solid;
        float:right;
        }

Question 3
I wanted the two div elements to form a two column page. However again the second div element takes more height than intended like the previous one, and also what’s happening is when I resize the browser, the second div goes under the first one.

enter image description here

Why is this happening and how can I avoid it?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Borders are not counted when calculating the width of an element. They are supplements to the specified width. This explains your slight inconsistencies. There is no 100% airtight solution to this problem as far as I know that will do exactly what you want (close to it, yes, but exactly, no). The most reliable is to use a table, but that isn’t a valid solution for designing a page layout as you already certainly know. Another option is to float right and left but have the width specified as either a slightly lower percentage than 50 (such as 48-48) or have a width specified in px which would allow you to calculate precisely the exact sizes that you need.

    When browsers begin to uniformly implement CSS3, the box-sizing property will be able to solve this problem. box-sizing specifies what to take into account when calculating the size of an element. Applying box-sizing:border-box; will take the border into account, but for the moment this isn’t widely enough implemented across browsers to use reliably in your code.

    • 0