Best Way to Represent 1/3Rd of 100% in CSS

Best way to represent 1/3rd of 100% in CSS?

Now that calc is widely supported among modern browsers, you can use:

#myDiv {
    width: calc(100% / 3);
}

Or you can use this as a fallback if your browser wouldn't support it:

#myDivWithFallback {
    width: 33.33%;
    width: calc(100% / 3);
}

css divide width 100% to 3 column

A perfect 1/3 cannot exist in CSS with full cross browser support (anything below IE9). I personally would do: (It's not the perfect solution, but it's about as good as you'll get for all browsers)

#c1, #c2 {
    width: 33%;
}

#c3 {
    width: auto;
}

css calc number division

The problem is with calc(2 / 3) you will just get a number without an unit. CSS can't display just a number as width. This would be like if you set width: 3 which obviously doesn't work.

If you want the percentage you will need to muliply it by 100%

width: calc(2 / 3 * 100%);

and if you really want the result in pixels multiply it by 1px

width: calc(2 / 3 * 1px);

How can an html element fill out 100% of the remaining screen height, using css only?

The trick to this is specifying 100% height on the html and body elements.
Some browsers look to the parent elements (html, body) to calculate the height.

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

one third container leaving white space at end css

The issue is that 100%/3 is 33.33% in most browsers, not quite the exact width you want it to be.

Instead of using calc() to find each table's width, I would use display:flex; on the parent of all three elements you want to be in one row.

This is the best I can help you with without any HTML structure. Please post that and I may be able to help you more.

.parentElement{  display:flex;}
.firstBox, .secondBox, .thirdBox {  padding: 20px 40px;  flex:1;}
.firstBox{  background:blue;  }
.secondBox{  background:red;  }
.thirdBox{  background:green;  }

<div class="parentElement">  <div class="firstBox"></div>  <div class="secondBox"></div>  <div class="thirdBox"></div></div>

width: calc(100% / 3); not working properly

2020 Answer

Use flexbox:

.container {
   width: 242px; /* /3 = 80.66̅  */
   height: 100px;
   
   display: flex;
}

.col {
  flex: 1 0 0; /* Set flex basis to 0 to force equal widths */
}

.col1 {
  background-color: red;
}
.col2 {
  background-color: green;
}
.col3 {
  background-color: blue;
}

<div class="container">
  <div class="col col1"></div>
  <div class="col col2"></div>
  <div class="col col3"></div>
<div>

Best Way to Represent 1/3Rd of 100% in CSS