CODEWITHSUNDEEP
htmlcss
NaN
NaN

Reputation: 1306

Equal width in percentages using table-cell

http://jsfiddle.net/hw98P/

While this is not a huge deal, it bothers me to not know why this behavior is happening. I have 3 divs set as table-cells. What I want is the left col at 20% and the middle and right cols to be at 40%, after padding has been added into that. I changed my px padding to percentages and have allotted for that difference in my calculations, but the middle and right cells are not the same width. The middle shows 482px and the right shows 508px.

My question is why is this happening? Is it possible to get the middle and right cols exactly the same width?

  #content {
  padding:15px 0;
  display:table;
  width:100%;
  }

  #content #col1 {
  border-right:1px solid #E2E2E2;
  padding-right:1%;
  width:19%;
  display:table-cell;
  }

  #content #col2 {
  border-right:1px solid #E2E2E2;
  padding-right:1%;
  padding-left:1%;
  width:38%;
  display:table-cell;
  }

  #content #col3 {
  width:39%;
  padding-left:1%;
  display:table-cell;
  }

<div id="content">
  <div id="col1">1</div>
  <div id="col2">2</div>
  <div id="col3">3</div>
</div>

EDIT:

I have also tried setting table-layout: fixed; on #col1 but this changes nothing.

Upvotes: 1

Views: 138

Answers (4)

darcher
darcher

Reputation: 3134

If you want to retain your code structure (by this I mean use table/table-cell), here's a better approach with the same concept: http://jsfiddle.net/darcher/hw98P/23/

BUT

To start, You have multiple options here to achieve what you need. position, table-cell, float, and flexbox. I've used all four in this fiddle demo. They have varying levels of support, so make sure you research the best option for you (you can check caniuse.com for this). I recommend float's as it's tried and true; however, flexbox is certainly picking up speed.

Onto your OP

The cause is probably the use of uneven paddings for each cell in conjunction with % width and right borders.

Disclaimer: Now, admittedly, I'm unsure of all the factors for the various browsers rendering of display:table.

  • I'm very inclined to believe it's the way you have structured the css and how the cells are inheriting padding, most specifically the order in which they're rendering.

I don't have an exact answer as to why, but I do have a solution. You can rework it using left borders and like paddings or clearing the left/right most paddings after declaring like paddings. You should attempt to be as consistent as possible when developing layout based code for factors ranging from scalability to error reduction and compatibility, it's just good practice. You can probably override the differing paddings structure by way of relatively positioning the cells, but I don't see a reason for the extra mark-up or time when there's a simple solution that promotes cleaner, better structured approaches.

1) Bear in mind there are limitations in support for calc(): http://caniuse.com/calc, you can use box-shadow:-1px 0 1px -1px #eee to avoid the 1px border-width and avoid using calc() altogether, but it too has its limitations: http://caniuse.com/box-shadow.

2) The border-box needs to be prefixed (even still) in order for this to react the same in Mozilla as it does in Chrome. While using this method, the browser calculates the padding and border-width into the element width for you. If you use the below you won't require calc() or offsetting your widths from your paddings. http://www.paulirish.com/2012/box-sizing-border-box-ftw/

How I'd do it: If I HAD to use display:table

*,*:before,*:after{/* 2 */
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box}

.content {
    display:table;
    padding:15px 0;
    width:100% }

div[class^=col] {
    display:table-cell;
    padding:0 15px }

.col1 { width:20%; } 
.col2, .col3{ 
    box-shadow:-1px 0 1px -1px grey; /* 1 */
    width:40% }

Upvotes: 0

Kheema Pandey
Kheema Pandey

Reputation: 10265

Here I've used box-sizing: border-box; and using of pseudo element all innderdiv width are equal now. Check the DEMO.

#content {
  padding:15px 0;
    width: 100%;
    display: table;
    table-layout: fixed;
  }
#content div{   
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

  #content #col1 {
  display:table-cell;
  background:gold;
  position:relative;  
  }

#content #col2:after, #content #col3:before{
position: absolute;
content: " ";
top:0;
left:0;
display:block;
width: inherit;
}


  #content #col2 {
  display:table-cell;
  background:green;
  position:relative;
  }

  #content #col3 {
  display:table-cell;
  background:yellow;
  position:relative;   
  }

Upvotes: 0

Mudassir
Mudassir

Reputation: 1156

It is absolutely possible. You can use the calc() CSS3 function which should make your measurements to your standard.

Example:

.style{
width:calc(50% - 10px);
}

Example explained: So lets say the my screen width resolution is 1000px the value 50% holds is 500px. This value is then taken 10px away from. The final value will give you for 490px for the width.

More info at https://developer.mozilla.org/en-US/docs/Web/CSS/calc

If you have any questions or this did not help, please comment back or contact me.

Upvotes: 1

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

It is all because of width calculation. So try to use box-sizing property. Update your CSS like below. More Information about box-sizing property

  #content {
  padding:15px 0;
  display:table;
  width:100%;
  }

  #content #col1 {
  border-right:1px solid #E2E2E2;
  padding-right:1%;
  width:20%;
  display:table-cell;
  box-sizing:border-box;
  }

  #content #col2 {
  border-right:1px solid #E2E2E2;
  padding-right:1%;
  padding-left:1%;
  width:40%;
  display:table-cell;
  box-sizing:border-box;
  }

  #content #col3 {
  width:40%;
  padding-left:1%;
  display:table-cell;
  box-sizing:border-box;
  }

FIDDLE DEMO

Upvotes: 1

Related Questions