Positioning multiple
tag outputs for two responsive squares

Question

I am in the process of creating a picture framing calculator. The output of the calculator displays four

tags on two squares:

Numbers 1 and 2 on the first square. Numbers 3 and 4 on the second square. The positioning is set to the center of each side's width and height. For example:

The problem I'm running into is that I'm unable to position

(#3) at the location in the square as shown in the above image. Using my code snippet below, you can enter the following:

Frame Width = 16
Frame Height = 20
Picture Width = 11
Picture Height = 17
Bottom Mat = 1

function calc()

{

  var frameWidth = document.getElementById('frameWidth').value
  frameWidth = parseInt(frameWidth)

  var frameWidthFraction = document.getElementById('frameWidthFraction').value
  frameWidthFraction = parseFloat(frameWidthFraction)

  var frameHeight = document.getElementById('frameHeight').value
  frameHeight = parseInt(frameHeight)

  var frameHeightFraction = document.getElementById('frameHeightFraction').value
  frameHeightFraction = parseFloat(frameHeightFraction)

  var pictureWidth = document.getElementById('pictureWidth').value
  pictureWidth = parseInt(pictureWidth)

  var pictureWidthFraction = document.getElementById('pictureWidthFraction').value
  pictureWidthFraction = parseFloat(pictureWidthFraction)

  var pictureHeight = document.getElementById('pictureHeight').value
  pictureHeight = parseInt(pictureHeight)

  var pictureHeightFraction = document.getElementById('pictureHeightFraction').value
  pictureHeightFraction = parseFloat(pictureHeightFraction)

  var bottomMat = document.getElementById('bottomMat').value
  bottomMat = parseInt(bottomMat)

  var bottomMatFraction = document.getElementById('bottomMatFraction').value
  bottomMatFraction = parseFloat(bottomMatFraction)

  if (isNaN(frameWidth) || isNaN(frameHeight) || isNaN(pictureWidth) || isNaN(pictureHeight) || isNaN(bottomMat)) {
    alert('All fields are required!')
    return
  }

  var widthdoubletop = ((frameHeight + frameHeightFraction) - (pictureHeight + pictureHeightFraction)) / 2;
  var heightdoubletop = ((frameWidth + frameWidthFraction) - (pictureWidth + pictureWidthFraction)) / 2;
  var widthdoublebottom = ((frameHeight + frameHeightFraction) - (pictureHeight + pictureHeightFraction)) / (2) + (bottomMat + bottomMatFraction);
  var heightdoublebottom = ((frameWidth + frameWidthFraction) - (pictureWidth + pictureWidthFraction)) / (2) + (bottomMat + bottomMatFraction);

  document.getElementById('widthdoubletop').innerHTML = new Fraction(widthdoubletop).toString() + '"';
  document.getElementById('heightdoubletop').innerHTML = new Fraction(heightdoubletop).toString() + '"';
  document.getElementById('widthdoublebottom').innerHTML = new Fraction(widthdoublebottom).toString() + '"';
  document.getElementById('heightdoublebottom').innerHTML = new Fraction(heightdoublebottom).toString() + '"';


}

function resetOutput() {
  document.getElementById('widthdoubletop').innerHTML = ""
  document.getElementById('heightdoubletop').innerHTML = ""
  document.getElementById('widthdoublebottom').innerHTML = ""
  document.getElementById('heightdoublebottom').innerHTML = ""
}

.square-container-double {
  display: flex;
  flex-wrap: wrap;
}

.square-double {
  position: relative;
  flex-basis: calc(50% - 10px);
  margin: 5px;
  margin-bottom: 40px;
  border: 5px solid;
  box-sizing: border-box;
  background-color: gray;
}

.square-double::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square-double .content-double {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: inline-block;
  justify-content: center;
  align-items: center;
}

#widthtdoubletop,
#widthdoublebottom {
  text-align: center;
  margin-top: 4px;
}

#heightdoubletop,
#heightdoublebottom {
  text-align: left;
  margin-top: 100px;
  margin-left: 4px;
}





  I Was Framed
  
  
  
  
  
  
  







  
    

      
    
  

  
  
    
      
        ×
        Double Mat
      
      

        
          

            Frame Width
            
            
                          
                      
          

          
            Frame Height
            
            
                          
                      
          

          
            Picture Width
            
            
                          
                      
          

          
            Picture Height
            
            
                          
                      
          

          
            Bottom Mat
            
            
                          
                      
          

          
          
          
          Need help?

As you can see from the output - the #3

positions itself in the wrong location when it should be like this:

Can someone offer some assistance to fix the positioning of that particular

?

user_7702557 · Answer

All that was needed was a little clever CSS. Since your parent node is already position: absolute, you can make the child node absolute and it will stay relative to where the parent is. Adding the following inline styling fixed it:

style="position: absolute; top: 0; width: 100%; text-align: center;"

function calc()

{

  var frameWidth = document.getElementById('frameWidth').value
  frameWidth = parseInt(frameWidth)

  var frameWidthFraction = document.getElementById('frameWidthFraction').value
  frameWidthFraction = parseFloat(frameWidthFraction)

  var frameHeight = document.getElementById('frameHeight').value
  frameHeight = parseInt(frameHeight)

  var frameHeightFraction = document.getElementById('frameHeightFraction').value
  frameHeightFraction = parseFloat(frameHeightFraction)

  var pictureWidth = document.getElementById('pictureWidth').value
  pictureWidth = parseInt(pictureWidth)

  var pictureWidthFraction = document.getElementById('pictureWidthFraction').value
  pictureWidthFraction = parseFloat(pictureWidthFraction)

  var pictureHeight = document.getElementById('pictureHeight').value
  pictureHeight = parseInt(pictureHeight)

  var pictureHeightFraction = document.getElementById('pictureHeightFraction').value
  pictureHeightFraction = parseFloat(pictureHeightFraction)

  var bottomMat = document.getElementById('bottomMat').value
  bottomMat = parseInt(bottomMat)

  var bottomMatFraction = document.getElementById('bottomMatFraction').value
  bottomMatFraction = parseFloat(bottomMatFraction)

  if (isNaN(frameWidth) || isNaN(frameHeight) || isNaN(pictureWidth) || isNaN(pictureHeight) || isNaN(bottomMat)) {
    alert('All fields are required!')
    return
  }

  var widthdoubletop = ((frameHeight + frameHeightFraction) - (pictureHeight + pictureHeightFraction)) / 2;
  var heightdoubletop = ((frameWidth + frameWidthFraction) - (pictureWidth + pictureWidthFraction)) / 2;
  var widthdoublebottom = ((frameHeight + frameHeightFraction) - (pictureHeight + pictureHeightFraction)) / (2) + (bottomMat + bottomMatFraction);
  var heightdoublebottom = ((frameWidth + frameWidthFraction) - (pictureWidth + pictureWidthFraction)) / (2) + (bottomMat + bottomMatFraction);

  document.getElementById('widthdoubletop').innerHTML = new Fraction(widthdoubletop).toString() + '"';
  document.getElementById('heightdoubletop').innerHTML = new Fraction(heightdoubletop).toString() + '"';
  document.getElementById('widthdoublebottom').innerHTML = new Fraction(widthdoublebottom).toString() + '"';
  document.getElementById('heightdoublebottom').innerHTML = new Fraction(heightdoublebottom).toString() + '"';


}

function resetOutput() {
  document.getElementById('widthdoubletop').innerHTML = ""
  document.getElementById('heightdoubletop').innerHTML = ""
  document.getElementById('widthdoublebottom').innerHTML = ""
  document.getElementById('heightdoublebottom').innerHTML = ""
}

.square-container-double {
  display: flex;
  flex-wrap: wrap;
}

.square-double {
  position: relative;
  flex-basis: calc(50% - 10px);
  margin: 5px;
  margin-bottom: 40px;
  border: 5px solid;
  box-sizing: border-box;
  background-color: gray;
}

.square-double::before {
  content: '';
  display: block;
  padding-top: 100%;
}

.square-double .content-double {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: inline-block;
  justify-content: center;
  align-items: center;
}

#widthtdoubletop,
#widthdoublebottom {
  text-align: center;
  margin-top: 4px;
}

#heightdoubletop,
#heightdoublebottom {
  text-align: left;
  margin-top: 100px;
  margin-left: 4px;
}





  I Was Framed
  
  
  
  
  
  
  







  
    

      
    
  

  
  
    
      
        ×
        Double Mat
      
      

        
          

            Frame Width
            
            
                          
                      
          

          
            Frame Height
            
            
                          
                      
          

          
            Picture Width
            
            
                          
                      
          

          
            Picture Height
            
            
                          
                      
          

          
            Bottom Mat
            
            
                          
                      
          

          
          
          
          Need help?

Positioning multiple <div> tag outputs for two responsive squares

1 Answers