Consistently sized columns with ever-changing content in a versatile layout

I have three divs with dynamic content, and I want the height of all three to always be the same. Here is the code for the three divs:

<div class="boxcontent3">
    <div class="whitebox3">
        <div class="whiteboxdemocont">
            conten1
        </div>
    </div>
    <div class="whitebox3">
        <div class="whiteboxdemocont">
            content2
        </div>
    </div>
    <div class="whitebox3">
        <div class="whiteboxdemocont">
            content3
        </div>
    </div>
</div>

and this is the corresponding CSS style:

.boxcontent3 {
    display: inline-block; 
    width: 100%;
}
.whitebox3 {
    float:left;
    background-color: white;
    border: 1px solid #dfe0e2; 
    -webkit-border-radius: 6px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
    -moz-border-radius: 6px; /* FF1-3.6 */
    border-radius: 6px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
    margin-top: 20px;
    margin-right: 10px;
    margin-bottom: 20px;
    width: 32%;
    height: 100%;
}

Thanks!

Answer №1

It appears you have utilized display table properties in this manner:

CSS

.boxcontent3{
   display: table; 
   width: 100%;
}
.whitebox3{
display:table-cell;
background-color: white;
border: 1px solid #dfe0e2; 
-webkit-border-radius: 6px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius: 6px; /* FF1-3.6 */
border-radius: 6px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
margin-top: 20px;
margin-right: 10px;
margin-bottom: 20px;
width: 32%;
height: 100%;
}​
 

View the live demo here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Execute a function in wxHtmlWindow after the page has finished loading

I'm currently facing an issue with wxPython that I could use some help with. My goal is to create a basic HTML window with forward and backwards navigation buttons. However, I'm encountering difficulties when users click on links within the page. ...

The third dropdown menu's options are determined by both the selections made in the first and second

I found this script on a different website and I am planning to incorporate it into my project. The goal is to display a list of pages in the third dropdown based on the selection of English and The Indian Express, or The Hindu. Here is the code: <sc ...

Tips for hiding a child element by setting its display property to none while the parent element is set to block

My current setup involves a Bootstrap Jumbotron that wraps a Bootstrap list. The Jumbotrom is hidden by default: <div class="jumbotron" id="shoppingCart" style="display: none"> <h1 class="display-4" >Checkout</h1> <p class="lead" ...

When choosing from multiple dropdown menus, the selected option should be hidden from the other dropdowns

I'm currently working on a project that involves designing a web form incorporating 3 select boxes with multiple questions. The concept is such that, if I choose the 1st Question from the 1st select drop-down, it should not be available in the 2nd sel ...

How to decrease the width of a dropdownlist control to make it narrower than the dropdown list

Is there a way to have a web form with a dropdown list <asp:dropdownlist>, where the actual control is narrow but when the user opens the dropdown, the list appears wider than the control for better formatting? Something similar to this concept: http ...

What is causing my app.css to be reluctant in displaying the outcome?

Having an HTML page called chat.blade.php and a CSS file named app.css, I am facing an issue where the CSS changes are not reflecting on the page after running the PHP dev command. It might be possible that I have incorrectly written the path in the HTML f ...

Styling targeted div class elements with specific input elements

I have a group of input text elements on my webpage. I am looking to style the div element with the "forms_in_ap" class that contains the #email, #reEmail, #nogInFirstName, and #nogInAccNumber elements specifically for Safari browsers on MAC and IOS device ...

How can you position an element at the bottom of a div using CSS?

Could you please assist me in aligning an element to the bottom of a div using CSS? Below is a screenshot of my webpage for reference: http://prntscr.com/5ivlm8 (I have indicated with an arrow where I want the element to be) Here is the code snippet of m ...

How to prevent jQuery from continually recalculating width on window resize?

Here is the code I've been working on: http://jsfiddle.net/7cXZj/ var callback = function () { $('.progress-bar').width($('.progress-bar').parent().width() - 190); $(".mainpart-background").animate({ width: "80%" }, 80 ...

HTML button failing to connect with CSS stylesheet

I am currently teaching myself CSS and using W3schools for guidance. Recently, I added a button to my website that redirects users to another page upon clicking. Everything functions correctly, but now I want to style the button using CSS. However, despit ...

Unable to alter the background color within the <option> element

Why does the script work when I put onClick in the <select> tag, but not when I put it in the option tag? Here is the HTML for the select: <select name="<?php echo $pos; ?>" id="<?php echo $pos; ?>"> & ...

The custom radio button options are not currently in view

I'm interested in personalizing my radio buttons to have a unique appearance. Here is the CSS and HTML code I am using: HTML: <div class="buttonSlider"> <input type="radio" value=".."></input> <input type="radio" value=" ...

What steps do I need to take to integrate Twilio's SMS service into an HTML document?

I have been searching for solutions using php and node.js (which is a derivative of js, so it should work), but I came across this library: <script type="text/javascript" src="//media.twiliocdn.com/sdk/js/client/v1.4/twilio.min.js"></script> ...

Using selenium in conjunction with python to click a unique button

Having trouble clicking the connect button on the "people you may know" page of LinkedIn () The HTML code for these buttons is: <a class="vcard-button bt-connect bt-primary" href="#"><span>&nbsp;</span>Connect</a> I attempted ...

In what way has SoundCloud managed to achieve this?

With their UI consisting solely of HTML, CSS, and JS, the question arises: how are they able to play audio without any visible flash player? ...

PHP forms not showing up properly

I have encountered an issue where text fields created in HTML disappear when the file is converted to PHP. Why does this happen and how can I prevent it? Code: <!DOCTYPE html> <html> <head> <title>StatsCalc V1</title> <li ...

Clicking on a button in HTML to open a JavaScript file

As a beginner in HTML and JavaScript, I am looking for a way to open a JavaScript file when the onclick event of a button in my HTML file is triggered. Can anyone provide me with guidance on how to achieve this? Thank you in advance. ...

spacing in html tags and div

Can someone assist me with this HTML element issue? <div class="sample"> <p>hello</p> </div> I am trying to eliminate white space between the <p> and <div> tags. Your help is much appreciated. Thank you! ...

Persistent navigation once fullscreen banner is completed

I have a full screen header on my one-page website. Below the hero section is the navigation element, which I want to be fixed after scrolling past the height of the full screen. Here's what I currently have in terms of code. HTML: <div id="hero" ...

Is there a feature that allows the phone number on the website to be dialed automatically as soon as the page loads?

Creating a marketing strategy for a client who wants the phone number on his website to automatically initiate a call as soon as visitors arrive through a marketing link. Is there a way to accomplish this without requiring an additional step of clicking "C ...