CODEWITHSUNDEEP
css
Jimm Chen
Jimm Chen

Reputation: 3787

Why LESS css width results in MORE visual width?

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:

enter image description here

# # # # # #

enter image description here

# # # # # #

enter image description here

Upvotes: 1

Views: 40

Answers (1)

91StarSky
91StarSky

Reputation: 482

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.

Upvotes: 1

Related Questions