Alter .css with JS? Setting dynamic .css properties with variables

Question

I have something like the below:

<div id="left">
    left
</div>
<div id="right">
    right
</div>

With .css properties:

#left {
    width: 60%;
    float: left
    min-height: ###
    max-height: 1000px;
}
#right {
    width: 40%;
    float: right;
    min-height: ###
    max-height: 1000px;
}

Notice the ### for both <div> CSS min-height properties. I'd like something like the below (some pseudo JS):

var leftheight = document.getElementById(left);
var rightheight = document.getElementById(right);
if (leftheight.currentHeight > rightheight.currentHeight) {
    rightheight.style.min-height = leftheight.currentHeight;
} else if (rightheight.currentHeight > leftheight.currentHeight) {
    leftheight.style.min-height = rightheight.currentHeight;
}

Basically I want:

if (current height of left > current height of right) {
    min-height of right = current height of left
} else if (current height of right > current height of left) {
    min-height of left = current height of right
} 
//ie. both left and right have the same min-heights, whichever is larger

My Javascript is wrong, and it's something I'm learning just now. Is there a method I can use to get my desired results?

possible duplicate of [HTML/CSS: Making two floating divs the same height](http://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height) — Rory McCrossan, Oct 24 '13 at 09:34
@RoryMcCrossan, I had previously looked at this question and the consensus seems to be to use padding/margin solution, which I think lacks finesse and is a 'cheap way out'; I was hoping to solve it with JS or jQuery. — gator, Oct 24 '13 at 09:37
As I stated in my answer, CSS is *exactly* what should be used for layouts. Javascript should *never* be used for that./ — Rory McCrossan, Oct 24 '13 at 09:39

score 2 · Answer 1 · answered Oct 24 '13 at 09:28

You can do this:

if (leftheight.currentHeight > rightheight.currentHeight) {
    rightheight.style.minHeight = leftheight.currentHeight;
} else if (rightheight.currentHeight > leftheight.currentHeight) {
    leftheight.style.minHeight = rightheight.currentHeight;
}

It's actually minHeight not min-height.

bipen · Answer 2 · 2013-10-24T09:36:53.263

1

using jquery

 $(function(){ //ready function to make sure document is ready
 var $leftdiv=$('#left'),
     $rightdiv=$('#right'),
     $leftHeight=$('#left').height(),
     $rightHeight=$('#right').height();
   if ( $leftHeight > $rightHeight) {
      $rightdiv.css('min-height':$leftHeight + "px");
   } else if ( $rightHeight > $leftHeight) {
      $leftdiv.css('min-height':$rightHeight + "px");
   } 
 });

edited Oct 24 '13 at 09:36

answered Oct 24 '13 at 09:30

bipen

36,319
9
49
62

A question: I'm learning both .js and jQuery. Does this need to be in a function/method, or it can be 'loose' like this? – gator Oct 24 '13 at 09:35
1

it has to be inside a document.ready function just to make sure your right and left div element is loaded before the if condition is called. – bipen Oct 24 '13 at 09:37

score 1 · Accepted Answer · answered Oct 24 '13 at 09:30

1

There is no need for javascript here, you can achieve this by adding a container with overflow: hidden and adding positive and negative margins to the left and right divs:

<div id="container">
    <div id="left">left</div>
    <div id="right">right<br /><br /><br /><br />Foobar</div>
</div>

#container {
    width: 75%; /* amend this as required */
    overflow: hidden;
}
#left {
    width: 60%;
    float: left;
    max-height: 1000px;
    background-color: #C00;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}
#right {
    width: 40%;
    float: right;
    max-height: 1000px;
    background-color: #0C0;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
}

Example fiddle

As a rule, javascript should never be used solely for layout purposes. What would happen to your page if someone has javascript turned off?

answered Oct 24 '13 at 09:30

Rory McCrossan

331,213
40
305
339

I've come across this before (padding and margin tomfoolery) and it doesn't work for me. Not only do I not get the result I want, but my page is extended by 1000px giving a load of whitespace. I'm using `box-sizing: border-box;` if it matters. – gator Oct 24 '13 at 09:32
1

In that case you have not applied `overflow: hidden` to your containing div. It works fine with `border-box` too: http://jsfiddle.net/FG4JM/2/ – Rory McCrossan Oct 24 '13 at 09:33
You're right. I've marked this as the answer because despite it lacking finesse, it does the job. The jQuery answers did as well, but I've found that resizing the page ruined it (it made gaps, but normalized on page load). Cheers for the help. – gator Oct 24 '13 at 10:06
I think the problem now becomes that I can't have a margin or padding on the left and right `
` elements.
– gator Oct 24 '13 at 11:00
1

You can, but you need to set them in %, as that's what the widths use: http://jsfiddle.net/FG4JM/3/. Or have containers inside left/right divs which are 100% width, and put the margin/padding on those instead. – Rory McCrossan Oct 24 '13 at 11:03

score 1 · Answer 4 · answered Oct 24 '13 at 09:33

you can use jquery

var leftheight = $('#left').height();
var rightheight =$('#right').height();


if (leftheight > rightheight) {
    $('#right').css('min-height',leftheight+"px")
 } 
else if (rightheight > leftheight) {
    $('#left').css('min-height',rightheight + "px")
}

Alter .css with JS? Setting dynamic .css properties with variables

4 Answers4