CSS: Issues with using three div elements and percentages for their width and height size

StackOverflow https://stackoverflow.com/questions/13627045

  •  03-12-2021
  •  | 
  •  

Question

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?

thanks in advance

Was it helpful?

Solution 2

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.

OTHER TIPS

All your questions are due to the box-model you misunderstood. height: 100% makes the content-height 100%. When you have a border AND height: 100% this leads to 100% + border-width, which obviously is more than 100%.

A possible solution is to use box-sizing: border-box;

The only browser not supporting this property are IE<8. If these are relevant to you, you could create a workaround with CSS-expressions for them. Handle with care!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top