align one div to same length as another

Question

I have a page with two div tags. One is a text and the other is a button beneath the text. The texts varies so I can not set it to a fixed size and the tekst element rescales as I zoom in and out. I want the button to 1: always be the same size as the text element 2: scale in the same way as the text element.

How can I do this?

.tekst{

    padding:1rem;
    font-size: 1rem;
    border:0.1rem black solid;
    margin-left: 2rem;
    max-width: 75rem;
}   


.button {
    background-color: #4CAF50; 
    border: none;
    color: white;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    max-width:75rem; 

}

jla · Accepted Answer · 2018-09-21T14:14:04.623

CSS Solution

Without knowing the structure of your HTML it's difficult to give an exact solution. However you do say that the button is to be displayed below the text. Therefore a CSS only solution could be to wrap both text and button in a div with display:inline-block so that its width shrinks to its contents. You would then set .button to have width: 100%, thus filling the width of its parent. Because .tekst would be then be setting the width of the parent (remember, the parent is shrinking to fit its content), .button would necessarily have the same width as tekst.

CSS:

.tekst-button-parent {
    display: inline-block;
}
.tekst {
    ...
}
.button {
    width: 100%;
    ...
}

HTML:

<div class="tekst-button-parent">
    <div class="tekst"> ... </div>
    <div class="button"> ... </div>
</div>

You may need to further style tekst-button-parent to occupy the same position in which your two elements currently reside.

JavaScript Solution

Alternatively you could use JavaScript to set the width of .button to be the same as .tekst everytime the window loads or resizes. If you only have the two occurrences of those divs then identifying the divs by className will be easy.

<script>

var setButtonSize = function(event) {
    var width = document.getElementsByClassName( "tekst")[ 0 ].innerWidth;
    document.getElementsByClassName( "button")[ 0 ].style.width = width + "px";
};

window.onresize = setButtonSize;
window.onload = setButtonSize;

</script>

If you have more than one pair of .tekst and .button then you'll need to match each pair before resizing.

score 0 · Answer 2 · answered Sep 21 '18 at 14:11

You should add an javascript function that calculats the width and set the width of the button

example:

$(function(){
 resize();
});
$(window).resize(function() {
 resize();
});

function resize(){
  $(".button").each(function(){
  var width = $('.text').width();
  var height = $('.text').height();
  $(this).css({'width': ''+width , 'height': ''+height  })
  });
}

.tekst{

    padding:1rem;
    font-size: 1rem;
    border:0.1rem black solid;
    margin-left: 2rem;
    max-width: 75rem;
}   


.button {
    background-color: #4CAF50; 
    border: none;
    color: white;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    max-width:75rem; 

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id soluta dolores eius quaerat quae nihil debitis reprehenderit et atque, repudiandae itaque iste molestiae nostrum eum laboriosam, unde molestias praesentium aperiam?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id soluta dolores eius quaerat quae nihil debitis reprehenderit et atque, repudiandae itaque iste molestiae nostrum eum laboriosam, unde molestias praesentium aperiam?  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id soluta dolores eius quaerat quae nihil debitis reprehenderit et atque, repudiandae itaque iste molestiae nostrum eum laboriosam, unde molestias praesentium aperiam?
</div>
<div class="button">

</div>

align one div to same length as another

2 Answers2

CSS Solution

JavaScript Solution