Why Use Percentage Value for Div's Width in CSS

Why use percentage value for div's width in CSS?

I, personally, dislike websites which have a % width for the main content area because of the inconsistency. It's best to use a pixel width of about 1000 pixels, maybe a bit less, for the whole website so that it will work for all resolutions.

As for elements inside the main content area, I tend to use percent widths because I don't really want to both with calculating the exact pixel values. The result is set in stone anyway because the thing that it's a percentage of is constant, as opposed to the monitor's resolution, which varies between users.

To sum it up: only use percentages when every user is going to get the same result because of a parent element having a fixed (pixel) width. Otherwise there will be inconsistencies in your design, making it so that you can't use any flashy images and the website may look ugly to users with giant / tiny monitors. If you are going to use percentage widths you simply have to test the website with different resolutions!

Can I program the div height to be a certain percentage of it's current width?

There's the padding trick, already answered, but I use another approach, envolving two nested divs.

The parent one, I set the width. The child one, I use the height value as a container unit vw - (means viewport width).

It works well, see here (resize the viewport)

<div>
    <div></div>
</div>

CSS:

div {
    width: 100%;
}

div > div {
    background: silver;
    height: 10vw;
}

Div width percentage not working in CSS

This is because of the borders.
If you leave out the borders your div will align.
Using the border-box solves the problem:

 .leftdiv{
box-sizing: border-box; 
width:20%;
border:2px solid blue;
float:left;}

.middlediv{
box-sizing: border-box;
width:60%;
border:1px solid orange;
float:left;}

.rightdiv{
box-sizing: border-box;
width:20%;
border:1px solid black;
float:right;}

The idea of a box-sizing: border box is that it modfies the behaviour of the normal box model to treat the padding and border as a part of the width element. So now when you set the % width the border is already taken into account. This is why now the 20+20+60 amount to 100%.

Additional info can be found in this link

CSS Div width percentage and padding without breaking layout

If you want the #header to be the same width as your container, with 10px of padding, you can leave out its width declaration. That will cause it to implicitly take up its entire parent's width (since a div is by default a block level element).

Then, since you haven't defined a width on it, the 10px of padding will be properly applied inside the element, rather than adding to its width:

#container {
    position: relative;
    width: 80%;
}

#header {
    position: relative;
    height: 50px;
    padding: 10px;
}

You can see it in action here.

The key when using percentage widths and pixel padding/margins is not to define them on the same element (if you want to accurately control the size). Apply the percentage width to the parent and then the pixel padding/margin to a display: block child with no width set.

---

Update

Another option for dealing with this is to use the box-sizing CSS rule:

#container { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */

    /* Since this element now uses border-box sizing, the 10px of horizontal
       padding will be drawn inside the 80% width */
    width: 80%;
    padding: 0 10px;
}

Here's a post talking about how box-sizing works.

div's height = its width, in percentages, so that the div looks like a square, with non-square shape of the container element (CSS only)

You will need an external <div> as a container and then an internal one as a square.

I used 50% dimensions for the square, but you can use the size you desire: it will be relative to the parent <div> container.

I also gave it a black background color to highlights it: here there is a DEMO.

The trick is all in the padding-bottom: 100% of the parent <div>.

CSS:

#container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

#square {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #000000;
}

HTML:

<div id="container">
  <div id="square">
  </div>
</div>

Why does percentage width work even if no explicit width value given for containing block?

Non-replaced block-level elements which are in normal flow take the width of their parent.

Well, that's a lie-to-children!

In order to understand what happens under the hood, we should start from how width of a non-replaced block-level element is calculated.

10.3.3 Block-level, non-replaced elements in normal flow

The following constraints must hold among the used values of the other
properties:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' +
'padding-right' + 'border-right-width' + 'margin-right' = width of
containing block

[...] If 'width' is set to 'auto', any other 'auto' values become '0'
and 'width' follows from the resulting equality.

Due to the fact that the initial value of width property is auto, the width of a block-level element would be the same as its containing block.

<html> is a block-level element and it lives in the initial containing block.

The initial containing block is a rectangular box which takes the width of the viewport. Hence the width of <html> element would be equal to the width of the viewport.

On the other hand, the containing block of <body> element is generated by <html>. Therefore they would have equal widths as well.

<body> itself establishes a containing block for its block-level children. And that's why a <div> element in normal flow will take the width of the viewport.

W3C indicates it better:

With no positioning, the containing blocks (C.B.) in the following
document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
   <HEAD>
      <TITLE>Illustration of containing blocks</TITLE>
   </HEAD>
   <BODY id="body">
      <DIV id="div1">
      <P id="p1">This is text in the first paragraph...</P>
      <P id="p2">This is text <EM id="em1"> in the 
      <STRONG id="strong1">second</STRONG> paragraph.</EM></P>
      </DIV>
   </BODY>
</HTML>

are established as follows:

For box generated by    C.B. is established by
html                    initial C.B. (UA-dependent)
body                    html
div1                    body
p1                      div1
p2                      div1
em1                     p2
strong1                 p2

---

However that is not true for height of non-replaced block-level elements ^{(which are still in normal flow!)}:

10.6.3 Block-level non-replaced elements in normal flow when 'overflow' computes to 'visible'

[...] If 'height' is 'auto', the height depends on whether the element
has any block-level children and whether it has padding or borders.

[...] Only children in the normal flow are taken into account (i.e.,
floating boxes and absolutely positioned boxes are ignored, and
relatively positioned boxes are considered without their offset).

The initial value of height is auto, therefore if the block-level element doesn't have any block-level children, padding or border, the computed value of height would be 0.

That's true even for <html> element.

---

Related Topics