Three containers positioned within a parent container at 100% height

Question

Three containers positioned within a parent container at 100% height

Within my div container (multiple_prizes in the fiddle), there are two other divs: one containing an upload button (upload_prize_img) and the other with 3 inputs (upload_prize_form). These two inner divs are positioned next to each other using bootstrap columns. You can see this layout here http://jsfiddle.net/SrL49/

(By the way, I couldn't get bootstrap to work in JSFiddle , if anyone knows how, please inform me. That's why I simulated the same effect by floating the inner divs)

In the current setup, the form div is taller than the upload div, which has a border. I want the upload div to match the height of the form so that the border extends from name to amount.

I've experimented with various combinations of setting height: 100% on all three divs, but haven't found a solution yet. If you have a solution using the bootstrap grid, that would be ideal. But if you need to use floating divs, that's okay too.

html css twitter-bootstrap

Answer 1

Answer №1

To accomplish this task, utilizing JavaScript is recommended.

Take a look at this demonstration

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

By the way, I stumbled upon this solution here.

Answer 2

To accomplish this task, utilizing JavaScript is recommended.

Take a look at this demonstration

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

By the way, I stumbled upon this solution here.

Answer 3

Answer №2

To create a table-like style, you can use the following code: http://example.com/table-style

.row {
   display: table;
}

#featured_image
{
   border: 1px solid blue;
   width: 50%;
   display: table-cell;
}

#description_text
{
   border: 1px solid orange;
   width: 50%;
   display: table-cell;
}

Answer 4

To create a table-like style, you can use the following code: http://example.com/table-style

.row {
   display: table;
}

#featured_image
{
   border: 1px solid blue;
   width: 50%;
   display: table-cell;
}

#description_text
{
   border: 1px solid orange;
   width: 50%;
   display: table-cell;
}

Three containers positioned within a parent container at 100% height

Answer №1

Answer №2

Similar questions

Missing entry in the dropdown menu rather than the intended selection

The appearance of the SVG icon changes when it is added to the webpage

Can I retrieve the element of any DOM element I'm currently hovering over using JavaScript?

Heroku Node Crash - ERR_INCOMPLETE_CHUNKED_ENCODING

Enhancing a class's properties from its parent component using React

Tips on positioning content beneath a fixed header or navigation bar when viewed in a web browser

Locating the nearest image within a specific div using jQuery's find method

Adjust the alignment of the text to match the orientation of the image

JavaScript allows you to create matrices from squares

Problem with integration of Bootstrap datetime picker in AngularJS directives

Elusive shadow fails to appear in ThreeJS scene

Tips for preserving CSS layout when incorporating new content in an ASP.NET project

Is there a way to achieve a full-page inset shadow using absolute positioned elements?

The orientation of the rating stars has transformed into a vertical layout

The fixed navigation bar shows a flickering effect while scrolling at a slow pace

Clearing the box-shadow effect when collapsing the side bar using a toggle button

"Modify hyperlink attributes to enhance security and optimize user experience

I'm unsure of how to eliminate the border outline on this particular text area

React app version displaying incorrect links to CSS and JS files

In order to implement the functionality in JavaScript, the .slider::-webkit-slider