I have a problem with the jQuery method .width(). I have 4 different textareas that I need to resize according to the size of a div that contains them, so I call the method .width() to get the actual width of the div (which anyway is 100% of the window) but this method always gets the wrong value even after wrapping everything in a $(window).ready().

Here is the CSS:

#contCode{
    width: 100%;
    height: 500px;
    margin-top: 50px;
    float: left;
    padding: 0;
}
.codeArea{
    float: left;
    font-family: "Lucida Console", Monaco, monospace;
    height:100%;
    padding: 5px 0 0 5px;
    margin: 0;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    resize: none;
}

This is the HTML:

<div id="contCode">
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <div class="codeArea"></div>
</div>

And this is the script:

$(window).ready(function (){
        var wi = $("#contCode").width(); 
        var wiTex;
        wiTex = (wi) / 4;
        $(".codeArea").width(wiTex);
    });

I have already tried with outerWidth and innerWith and got the same result.

I have a problem with the jQuery method .width(). I have 4 different textareas that I need to resize according to the size of a div that contains them, so I call the method .width() to get the actual width of the div (which anyway is 100% of the window) but this method always gets the wrong value even after wrapping everything in a $(window).ready().

Here is the CSS:

#contCode{
    width: 100%;
    height: 500px;
    margin-top: 50px;
    float: left;
    padding: 0;
}
.codeArea{
    float: left;
    font-family: "Lucida Console", Monaco, monospace;
    height:100%;
    padding: 5px 0 0 5px;
    margin: 0;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    resize: none;
}

This is the HTML:

<div id="contCode">
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <textarea class="codeArea" placeholder="Put your code here"></textarea>
    <div class="codeArea"></div>
</div>

And this is the script:

$(window).ready(function (){
        var wi = $("#contCode").width(); 
        var wiTex;
        wiTex = (wi) / 4;
        $(".codeArea").width(wiTex);
    });

I have already tried with outerWidth and innerWith and got the same result.

• javascript
• jquery
• html
• css

• 1 What result are you getting? – Hopeless Commented Aug 11, 2016 at 21:32
• 1 It returns the correct size. You're probably confused about why there's a line break after the 3rd textarea. border adds extra width to each codeArea that you aren't accounting for. Try wiTex = ((wi) / 4) - 8; Subtracting 8 accounts for 2 extra pixels per box. – Mike Cluck Commented Aug 11, 2016 at 21:34
• @MikeC – except, subtracting 8 pixels doesn't actually fix it. See my answer below instead – Kevin Jantzer Commented Aug 11, 2016 at 21:47
• @KevinJantzer Your answer is not wrong but subtracting 8 pixels does work. You were performing the subtraction on the wrong value. – Mike Cluck Commented Aug 11, 2016 at 21:48
• @MikeC - That logic is not what you described "2 extra pixels per box" – You are subtracting 8 pixels from each box (=32) when the borders only account for 2 pixels each (=8) – Kevin Jantzer Commented Aug 11, 2016 at 21:52

4 Answers 4

I found two issues. The first I knew about

1. You need to add box-sizing: border-box so that when you set the width of the boxes the border width is included. If you don't, a box set to 100px with a 1px border will actually be 102px wide.

2. The second issue I found was with jQuery's .width() method. For some reason even when I told it manually to set to .width('100px') the boxes were being set to 112px. I changed it to use vanilla JavaScript instead.

You can see from the demo below that the boxes align now.

$(window).ready(function() {
  var wi = $("#contCode").width();
  var wiTex = (wi) / 4;

  document.querySelectorAll('.codeArea').forEach(function(node) {
    node.style.width = wiTex+'px'
  })
  
});

#contCode {
  width: 100%;
  height: 500px;
  margin-top: 50px;
  float: left;
  padding: 0;
}
.codeArea {
  float: left;
  font-family: "Lucida Console", Monaco, monospace;
  height: 100%;
  padding: 5px 0 0 5px;
  margin: 0;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  resize: none;
  background: #ccc;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contCode">
  <textarea class="codeArea" placeholder="Put your code here"></textarea>
  <textarea class="codeArea" placeholder="Put your code here"></textarea>
  <textarea class="codeArea" placeholder="Put your code here"></textarea>
  <div class="codeArea">The result area</div>
</div>

just use this:

$(document).ready(function (){
    var wi = $("#contCode").width(); 
    var wiTex;
    wiTex = (wi) / 4;
    $(".codeArea").width(wiTex - 7); //here is the trick =)
});

why i substruct 7 pixels? That's because of how css calculate width of an element.

In css, width equals width + padding + border. In your case, real width of element would be: wiTex + 5px of left padding + 2 pixels of borders

you can even remove javascript code and use this css:

.codeArea{
    float: left;
    font-family: "Lucida Console", Monaco, monospace;
    height:100%;
    padding: 5px 0 0 5px;
    margin: 0;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    resize: none;
    width: calc(25% - 7px); /* magic =) */
}

You can see it for yourself.

Try this!

    #contCode{
        width: 100%;
        height: 500px;
        margin-top: 50px;
        float:left;
        padding: 0;
    }

    .codeArea{
        float: left;
        font-family: "Lucida Console", Monaco, monospace;
        height:100%;
        width:22%; //Added this
        padding:5px 0 0 5px;
        margin: 0;
        border:1px solid #ccc; 
        color:#333; 
        resize: none;
        background-color:#eee;
    }

    <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <div id="contCode">
       <textarea class="codeArea" placeholder="Put your code here"></textarea>
       <textarea class="codeArea" placeholder="Put your code here"></textarea>
       <textarea class="codeArea" placeholder="Put your code here"></textarea>
       <div class="codeArea">Hello World</div>
    </div>

Cheers!

There is a line break after the 3rd textarea. Is it because of the CSS3 box-sizing Property? By default it is content-box,which only contains the content itself but not the padding. You need to change it to border-box;