Unexpected quirks when aligning two div elements side by side

How can I center two divs next to each other, as described here? The issue is that my right div always ends up slightly lower than the left one when I add a <span> and a heading. Why does this happen and what can I do to prevent it?

#right {
  display: inline-block;
  width: 100px;
  height: 160px;
  padding: 15px;
  background: rgba(0, 0, 0, .4);
  border-radius: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
#wrapper {
  text-align: center;
  padding: 40px;
  height: 160px;
  max-height: 160px;
}
#left {
  display: inline-block;
  width: 100px;
  height: 160px;
  padding: 15px;
  background: rgba(0, 0, 0, .4);
  border-radius: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
<div align="center" id="wrapper">
  <div id="left"></div>
  <div id="right">
    <span style="text-decoration: underline;">Heading</span>
    <div id="some-content"></div>
  </div>
</div>

htmlcss

Answer №1

To achieve the desired outcome, apply vertical-align: top; to both the #right and #left divs.

#right {
  display: inline-block;
  width: 100px;
  height: 160px;
  vertical-align:top;
  padding: 15px;
  background: rgba(0, 0, 0, .4);
  border-radius: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
#wrapper {
  text-align: center;
  padding: 40px;
  height: 160px;
  max-height: 160px;
}
#left {
  display: inline-block;
  vertical-align:top;
  width: 100px;
  height: 160px;
  padding: 15px;
  background: rgba(0, 0, 0, .4);
  border-radius: 1px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}
<div align="center" id="wrapper">
  <div id="left"></div>
  <div id="right">
    <span style="text-decoration: underline;">Heading</span>
    <div id="some-content"></div>
  </div>
</div>

Answer №2

Inline-block elements are positioned based on the baseline of the text they contain. In cases where there is no text present, the bottom border serves as the baseline reference. In your scenario, the bottom border of the left DIV lines up with the text baseline in the right div. If you remove the text (regardless of the span tag), the alignment remains intact. When both boxes have text, they align according to the lowest text lines (see example here: http://codepen.io/anon/pen/YqpJRg)

To align these boxes properly, apply display: block and float: left to both DIVs, while using position: relative;, margin:auto, and a fixed width equal to the sum of both DIV widths for the wrapper to center them.

You can view the outcome in this codepen: http://codepen.io/anon/pen/mPOzaZ

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

What are the steps to incorporate an iframe containing uniquely designed XML content?

I'm currently working on a website project for a client who specifically wants to include news from the BBC. Despite spending 3 hours searching online, I haven't been able to successfully insert an XML file into an iframe and style it to the clie ...

javascriptjquerycssxmliframe

Automatically expand a child node in the tree menu

Hey there! I've got a tree menu that I'm working with. I'm looking to have a specific node in the tree menu automatically open by default. Essentially, I want a particular node to be open when the page is refreshed. For instance, in this e ...

htmlcssmenu

How can we prevent checkbox and radio buttons from being triggered by accidental taps on the surrounding area on touch-responsive devices?

On touch screen responsive devices, there seems to be an issue where clicking outside the checkbox or radio button (within about 8px) causes the checkbox or radio button to toggle. This problem only occurs on responsive touch devices and works fine on desk ...

javascripthtmlcheckboxbootstrap-4radio-button

Efforts to seamlessly combine two divisions of a business card through the use of CSS and HTML

Currently, I am working on designing a business card that includes both front and back sections. Below is the code snippet that I have been using: .business-card:hover .front{ transform: perspective(700px) rotateX(180deg); } .business-card .back{ tr ...

css

anychart: The right side of Gantt Charts is being cut off or trimmed

I am utilizing anychart for my user interface. My data timelines are in epoch milliseconds. When trying to create a Gantt chart, I notice that the right side is being trimmed. Can someone please assist me with this issue? https://i.sstatic.net/H6LHk.png ...

javascripthtmlbootstrap-4gantt-chartanychart

Whenever I attempt to display certain HTML files in Django, I encounter an error message stating: "NoReverseMatch at / Reverse for 'it_languages' not found."

Every time I attempt to display a HTML file in my Django project, an error pops up preventing me from accessing the localhost page. The exact error message I receive is: The error is: NoReverseMatch at / Reverse for 'it_languages' not found. &apo ...

pythonhtmldjango

Utilizing JavaScript to dynamically set the height and width of a canvas based on the user input

How can I take user input for height and width values and apply them to a newly created canvas? I am able to retrieve the values, but I'm unsure how to set them as the style.height and style.width properties. var createNewCanvas = document.getEleme ...

javascriptcsshtmlcanvas

A guide to activating automatic filling of usernames and passwords in web browsers

On my login page, I aim to make the user experience seamless by automatically filling in the username and password fields once a user has logged in for the first time. This way, when they return to the login page, all they have to do is click the login but ...

jqueryhtmlautofill

Utilizing Vue.js components and properties to invoke a function

Trying to create a shopping cart button that keeps track of how many times it's clicked, but encountering an issue where the function called by the button doesn't receive the correct parameter. I attempted using {{id}} and :onClick="addThisToCar ...

javascripthtmlvue.js

The website functions perfectly in Firefox, but encounters issues in Chrome

Having an issue with my website where a table is not displaying correctly next to an image in Chrome, even though it works fine in Firefox. Here is the CSS: #right{ float:right; position: absolute; } #left{ float:left; position: absolute; } This is how t ...

htmlcssgoogle-chromefirefox

Having trouble unchecking the checkbox when the dropdown is set to 0

I am currently working on enhancing the functionality of my ordering form. When a checkbox is checked, the quantity dropdown value will change to 1. When a checkbox is unchecked, the quantity dropdown value will change to 0. If the quantity dropdown va ...

jqueryhtmlcssformscheckbox

Custom validation for Stripe checkout form

Currently, I am working on setting up a customized Stripe checkout where the total amount is dynamic based on the user's selection in the "isStudent" radio button. Additionally, there is a form on the page that needs to be validated before submission, ...

javascripthtmlformsvalidationstripe-payments

Blazor: Personalizing color variables in _root.scss - A Step-by-Step Guide

Upon inspecting the generated project, I noticed a multitude of color variables such as --bs-body-bg. The developer tools indicate it is in _root.scss, however, that file appears to be non-existent and I suspect those variables may actually reside within b ...

cssbootstrap-4blazorblazor-server-side

Browsing a container with JavaScript

I am attempting to display one div at a time and scroll through them repeatedly. I found and modified a Fiddle that works as intended, but when I try to implement it on my own test page, the divs do not scroll as expected. Here is the Fiddle example: http ...

javascriptjqueryhtml

Issue with iPad Pro displaying Bootstrap 4 Navbar toggle icon

Having trouble with my Bootstrap 4.1.1 navbar on iPadPro. It's not displaying the correct data from the div and it's not collapsing properly. However, it works fine on small devices. Any suggestions on how to fix this issue? Here's the code ...

cssangulartwitter-bootstrap

CSS challenge: designing a tab interface

I am facing a CSS challenge that has got me stumped. I'm not even sure if it's achievable. Here is what I'm trying to achieve: There are three buttons/tabs displayed like this . When a tab is clicked, a different div should be shown for eac ...

csshtmltabs

Creating Dynamic HTML Links with C# Programming

In the web application I am working on, there is a menu that looks like this: <div> <ul> <li><a href="http://localhost:52451/Voronezh/Settings.aspx">Settings</a</li> <li><a href="http://localhost:52451/L ...

c#htmlasp.net

Check out this stylish Twitter-inspired SVG text counter created with a combination of CSS and jQuery! See it in action here: https://jsfiddle.net/moss24

Looking to develop a text counter similar to Twitter that increases the width in green color up to 75%, then switches to yellow until 98%, and finally turns red if the input value is greater than or equal to 400. It should also add a "highlight" class when ...

javascriptjquerycss

How can you enable fullscreen for a featherlight iFrame?

I have implemented Featherlight to display an iframe within a popup modal on my website. If you click the iframe button, you can see a demo of how it works. One issue I am facing is that the generated iframe tag by Featherlight does not include allowfulls ...

javascriptjqueryhtmliframe

How can I obtain the width of one element and then use it to adjust the size of another element that is

Currently, I am working on a dropdown menu and facing an issue with setting the submenus to match the width of the top-level page. In my HTML structure (specifically for a WordPress theme), it looks something like this: <ul class="menu"> <li ...

javascriptjquerycsswordpress