CODEWITHSUNDEEP
htmlcss
krtek
krtek

Reputation: 265

Math in CSS - more precise percentages

This is how I make a 3 column page with equal sizes:

<div class="wrapper">
   <div style="width:33%;float:left;background-color:red;"></div>
    <div style="width:33%;float:left;background-color:green;"></div>
   <div style="width:33%;float:left;background-color:blue;"></div>
</div>

Is there a way to avoid using width:33% and entering a more accurate number? I'm ok with javascript options.

Upvotes: 1

Views: 1165

Answers (3)

JSW189
JSW189

Reputation: 6325

This can be accomplished using the CSS3 calc() property.

CSS:

div.column {
    width: 33.33%; /* Fallback in case the browser does not support calc() */
    width: -webkit-calc(100% / 3); /* Chrome 19 and above */
    width:    -moz-calc(100% / 3); /* Firefox 4 and above */
    width:         calc(100% / 3); /* IE 9 and above */
}

HTML:

<div class="wrapper">
   <div class="column" style="float:left;background-color:red;"></div>
   <div class="column" style="float:left;background-color:green;"></div>
   <div class="column" style="float:left;background-color:blue;"></div>
</div>

JS Fiddle Example

Browser Compatibility Table

Upvotes: 1

Bhushan Firake
Bhushan Firake

Reputation: 9448

Can't you directly use width:33.33%? It's not impossible. It's not even particularly hard, with the use of display: table. Tables work great if you know your screen size. Responsive tables however are still being worked out

Compatibility table for support of CSS Table display in desktop and mobile browsers. Some IE 7 fixes related to CSS Table are here.

Upvotes: 0

sheriffderek
sheriffderek

Reputation: 9043

First of all - get those styles out of the html:

<body>
    <section class="main-content">
        <div class="colum01">Column01</div>
        <div class="colum02">Column01</div>
        <div class="colum02">Column01</div>
    </section>
</body>

In your CSS:

.main-content {
    width: 100%;
    float: left;
    overflow: hidden;
}

.column01 {
    width: 33%;
    float: left;
    background-color: red;
}

.column02 {
    width: 34%;
    float: left;
    background-color: orange;
}

.column03 {
    width: 33%;
    float: left;
    background-color: yellow;
}

or you can use 33.3 and 33.4 and 33.3%

I keep assuming that everyone uses border-box: this is going to make everything magic once you start padding. pushes the padding inside the box instead of outsite, so you don't have to worry about adding up all of the padding and widths to make 100%

Paul Irish on the subject

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

If you are using lists to display things in columns, you can you :nth to target the 3rd item in each column and put a 33.4% on those only... Using calc is not widely supported at this time and using javaScript is still just going to create styles for you. So I would suggest keeping things as simple as possible. This works great for me. (and it gets rid of that pesky little black line that appears when you use 33.3% on all 3.

Upvotes: 1

Related Questions