Elements styled as inline blocks with static dimensions, irregular in size

Is there a way to ensure that all three boxes are displayed at the same level? Currently, box 2 appears below box 1 and 3 due to having less content. I believe there must be some styling element missing to make each div display at an equal level regardless of its content.

http://jsfiddle.net/bkmorse/519xzvou/

CSS:


.container {
    width: 470px;
    border:1px solid purple;
    height: 210px;
}

.box {
    width: 150px;
    height: 200px;
    border:1px solid red;
    display:inline-block;
}

HTML:


<div class="container">
    <div class="box">
        <h1>Box 1</h1>
        <p>Content</p>
        <p>Content</p>
    </div>

    <div class="box">
        <h1>Box 2</h1>
    </div>    
    <div class="box">
        <h1>Box 3</h1>
        <p>Content</p>
        <p>Content</p>
    </div>
</div>

Answer №1

To give your website a clean look, add the CSS rule vertical-align:top to the .box class in your stylesheet.

Answer №2

By setting them to appear as table-cell, their heights and positioning are automatically adjusted:

http://jsfiddle.net/519xzvou/2/

.box {
    width: 150px;
    height: 200px;
    border:1px solid red;
    display:table-cell;
}

Answer №3

Utilize CSS 3 feature within the main class display:-webkit-box; -webkit-box-orient: horizontal;

[code snippet available here][2]

[2]: http://jsfiddle.net/519xzvou/4/

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

Injecting navigation bar onto an HTML page using jQuery

After being a dedicated user of ASP, I have made the decision to switch to a Linux-based server for my website. However, as I begin to build my site, I am facing challenges that were once simple in ASP - such as loading a constant navigation bar. My objec ...

Tips for preventing extra whitespaces and line breaks from being added to the render tree in Blazor applications

Consider the code snippet below <div> @for (int i = 0; i < 10; i++) { <span class="@classes[i]">@i</span> } </div> The desired output is (with each character styled differently) 01234567890 Howev ...

Angular 4: preventing button click until form validation is successful

I am facing a situation where I have a form with required fields and 2 buttons: one button is for submitting the form, and the other button is for downloading a file. When the form is not valid, the submit button is disabled until the form becomes valid: ...

Angular JS allows for the display of text from a textarea upon clicking the submit button

Q] How can I display a single text message from a textarea upon clicking the submit button in angular-js? Here is the current code that I have: <html ng-app="myApp"> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1 ...

Guide on applying CSS to option tag within a select element in VUE.js

I am attempting to design a dropdown menu that resembles the one shown in the image. However, I'm currently unable to include any CSS styling. Can anyone provide guidance on how to create a customizable select dropdown in Vue? https://i.stack.imgur.c ...

`On mouseup event, changing specific text`

I've been working on a real-time HTML highlighter that surrounds selected text with span elements containing a background property. Check out the fiddle here: https://jsfiddle.net/4hd2vrex/ The issue arises when users make multiple selections, leadi ...

Tips for repairing a button on an image backdrop and ensuring its position remains unchanged during resizing

My goal is to add tags to people's faces on my website. While I am aware of the image map property, I am facing an issue where the background of the main Div needs to be set to 'cover'. However, when the window is resized, the coordinates of ...

Vue 2 does not properly transition the initial element when using the `mode=out-in` attribute

In my Vue project, I am using version 2.6.14 and trying to toggle between two buttons by utilizing v-if and v-else. Despite wrapping everything in a transition element, the first button doesn't transition smoothly, neither when appearing nor disappear ...

Animating an image in an HTML document by clicking a button through jQuery

I am trying to figure out how to make an image move from the left to the right of a page when a button is clicked. I thought the code below would work, but unfortunately, it's not functioning as expected. I'm new to JQuery and could use some guid ...

Is it possible to animate captions and slides individually within a Bootstrap 5 carousel?

Beginner coder here, testing my skills with a self-assigned task. I've created a carousel using Bootstrap 5 with three slides, each containing two lines of captions. As the slides transition, the captions move in opposite directions—up and down. Ho ...

Styling CSS Based on Input from Child Siblings

Is it possible to customize an adjacent element based on a valid input from a child element? Let's say we have the following HTML structure: <div id="source"> <input type="text"> </div> <div id="target"> </div> Below ...

To change the font color to red when clicked, I must create a button using HTML, CSS, and Javascript

Currently, I am utilizing CodePen to assess my skills in creating a website. Specifically, I am focusing on the HTML component. My goal is to change the font color to blue for the phrase "Today is a beautiful sunny day!" Here is the snippet of code that I ...

Firefox causing images to have a white border after rendering

My image (.png) has a white border only in Firefox, despite the CSS border property being set to 0. Is there a solution to remove this unwanted border around the image? ...

Enhance user experience by enabling clickable links in Angular comment sections

Currently, I'm developing an application that allows users to add comments to specific fields. These comments may contain links that need to be clickable. Instead of manually copying and pasting the links into a new tab, I want the ability to simply c ...

Send the form via ajax

I am in the process of creating a unique application for my university, which is essentially a social network. One key feature I need to implement is the ability for users to add comments, which involves inserting a row into a specific database. To achieve ...

Discovered a critical vulnerability that requires your attention. Execute `npm audit fix` to resolve the issue, or use `npm audit` for more information

After attempting to install mysql using 'npm install mysql', I encountered an error message stating: "found 1 critical severity vulnerability run npm audit fix to fix them, or npm audit for details" Following this, I proceeded with 'npm au ...

What is the correct way to nest multiple ng-if statements?

I'm currently grappling with a problem involving multiple nested ngIf directives applied to ng-template elements in Angular.js, and I've yet to find the ideal solution. While I am aware of workarounds, they are not as efficient as I would like th ...

Upon calling the method, an undesirable page refresh occurs

I have been experimenting with dynamically generating additional input fields using vuejs when a user clicks a button. Initially, my code functions properly by creating more fields, but unexpectedly the page refreshes automatically, resetting the user&apos ...

Verifying internet connectivity and updating content using jQuery and JavaScript

Upon loading the page, the following functionality occurs without triggering a click event: The updated code attempts to determine if the internet connection is active. If the connection is off, the 'link' on the page will be disabled (non-click ...

Create a scrollable Bootstrap table without impacting the layout grid system

Is there a way to create a scrollable table without impacting the grid system layout? How do I make a table scrollable while keeping the col-xs tag intact? <table class="col-xs-12"> <thead> <th class="c ...