Why LESS css width results in MORE visual width?

Question

I have an html like this:

<!doctype html>
<head>
<style>
body { background-color: #eee; }

.container {
  display: table;
  border-spacing: 1.5em 0;
 }

.cell {
  display: table-cell;
  background-color: orange;
  border-radius: .5em;
  padding: 1em;
  width: 50%;
}
</style>
</head>
<body>
  <div class="container">
    <div class="cell">Left cell</div>
    <div class="cell">#</div>
  </div>
</body>

and I'm baffled with the width property. The value 10% produces more visual width than value 50%. Why?

NOTE: I deliberately miss out css width property for .container, so to observe how/why CSS behaves this way.

See image below:

# # # # # #

A table is by default as wide as it's contents. In your case this creates the following scenario: cell says "I'm 50% width of you, table. So how much is that for me?". table responds "Well, that depends on how wide you two are, because I'm just as wide as necessary to include you both. So how wide are you?" cell says: "I'm 50% width of you, table. So how much is that for me?" .... rinse and repeat. — connexo
– connexo, Commented May 31, 2019 at 9:40

91StarSky · Accepted Answer · 2019-05-31 09:37:08Z

1

The problem is your container's display: table style. It's unwise to mix table structure along with its cells' individual width property. So, either use div layout or control the width of cell's from your container's style.width property. Please note, typical table style maintain's its cell's width ratio in its own way. Also, I will suggest to add a width property to your container. Then you can play with cell's style.width and see for yourself how tables work.

edited May 31, 2019 at 9:37

answered May 31, 2019 at 9:31

91StarSky

4823 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jimm Chen Over a year ago

Oh yes. If I add width:100% to .container, the cells width value becomes rational. But I'd like to know, in case of lacking the container's width value, what is the rule to determine the cell's visual width.

91StarSky Over a year ago

I believe its the cell's content, like @connexo commented

Collectives™ on Stack Overflow

Why LESS css width results in MORE visual width?

# # # # # #

# # # # # #

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

# # # # # #

# # # # # #

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related