CODEWITHSUNDEEP
htmlcsslayout
Mr. X
Mr. X

Reputation: 897

Specifying a value greater than 7% makes the column widths uneven. Can someone explain why?

This is the page in question:

http://codepen.io/virtuoso/pen/uyckh

At the bottom of the page, there are three DIVs (Content 1, Content 2, Content 3) with display:table-cell and width: 1%. I have two questions regarding them:

  1. Even though the width is 1%, each one occupy 1/3rd of the width of the container. Why?

  2. If I change the width to 50%, the first two cells expand to cover about 80% of the container and are both the same width, while the third one becomes very narrow. If the width is set to 100%, the first cell becomes 80% wide, and the other two are now the same width and occupy the remaining space. Why this strange behaviour? I was expecting all three DIVs to be equally wide in all cases. What's happening here?

Upvotes: 1

Views: 36

Answers (1)

LittleSweetSeas
LittleSweetSeas

Reputation: 7084

1 - By default, table-cells (or element displayed as them) will fill their container completely, so assigning a width to them may be considered as a "relative" assignment more than a standard "absolute" assignment. So, if their width sum is less than 100%, they will share the remaining width.

2 - Same here, if their sum width is more than 100%, they will try to take all the available space (starting from the first td, then the 2nd, and so on). The fact that they don't implements "overflow:hidden" CSS attribute implies that the third TD (the one who should use the remaining 0% of available width) will be displayed just to wrap its content.

Upvotes: 1

Related Questions