0

I have a div container (multiple_prizes in the fiddle), that contains other two divs: one that has an upload button (upload_prize_img) and the other one has 3 inputs (upload_prize_form). The two inside divs are one beside each other with bootstrap columns. As you can see here http://jsfiddle.net/SrL49/

(btw I could make bootstrap to work in JSFiddle , if anyone knows how, please tell me. That's the reason I simulated the same effect floating the inside divs)

As you can see, the form div is bigger than the upload div, and the upload div has a border. I want that div to have the same height as the form, so the border wraps from name to amount.

I tried almost any combination of height: 100% in all 3 divs, anyone has a solution for this? If you can use the bootstrap grid it would be better, but if you use floating divs it's ok too.

David Zhou
  • 142
  • 7
  • [Fiddle](http://jsfiddle.net/SrL49/1/) Do you need this?? – Gibbs Jul 16 '14 at 15:46
  • So I have to put a specific height to the divs? I don't know the height of the `upload div`, I just want the first one to get the same height – David Zhou Jul 16 '14 at 15:51

2 Answers2

1

You could use javascript to do this job.

Check this demo

var divh = document.getElementById('upload_prize_form').offsetHeight;
document.getElementById('upload_prize_img').style.height = divh + 'px';

Btw. I found this answer here.

Community
  • 1
  • 1
GCallie
  • 413
  • 1
  • 3
  • 11
1

You can style it as a table: http://jsfiddle.net/SrL49/6/

.row {
   display: table;
}

#upload_prize_img
{
   border: 1px solid red;
   width: 33%;
   display: table-cell;
}

#upload_prize_form
{
   border: 1px solid green;
   width: 66%;
   display: table-cell;
}
Puzzled
  • 74
  • 5