CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Grumbunks
Grumbunks

Reputation: 1257

How to make an element in a page the same visual width as another element exactly?

I'm trying to make it so that element A's width is equal to B's width so that they both visually appear to be the same.

I tried to do:

$('#A').css('max-width', $('#B').css('width'));

But this doesn't work the way I want it to, because B's width is 83%, so A's max width becomes 83%.

This doesn't make A visually the same as it just becomes 83% of its parent element, which makes it appear bigger on the page.

Is there a way to calculate the visual width of B so I can use that as A's max-width, using jQuery?

EDIT: I can't edit the document structure.

Upvotes: 0

Views: 67

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 105853

via javascript only, offsetWidth should do :

The HTMLElement.offsetWidth read-only property returns the layout width of an element as an integer.

var myW = document.querySelector("#a").offsetWidth;
document.querySelector("#b").style.width=myW+"px";
p {float:left;clear:left;border:solid;margin:1px 1em;box-sizing:border-box;}
<p id="a">some content to give a width</p>
<p id="b">:</p>

Upvotes: 1

Sean Doherty
Sean Doherty

Reputation: 2378

You need to be setting width, not max-width.

$('#A').css('width', $('#B').width() )

https://codepen.io/doughballs/pen/zYGrMoK

Max-width restricts how wide an element can be - if it isn't already at the width you set as max width, then max-width won't have any effect. Width tells an element how wide it should be.

Upvotes: 0

Related Questions