How to vertically center the contents of two adjacent divs with automatic width?

I've experimented with a range of HTML elements and CSS styles in an effort to make this work, but without success. How can I achieve the following task?

My goal is to have two side-by-side DIVs that automatically adjust their size based on the content width (I was using "display: inline-block" for this purpose). Additionally, I want the content within each DIV to be aligned at the top rather than at the bottom. The content includes labels (spans) and text sourced from a database. These two DIVs should remain positioned to the right of another DIV, which serves as the menu on the left-hand side of the page.

MENU      AUTO            ANOTHER
FIXED     WIDTH           COLUMN (DIV)
WIDTH     DIV             ALSO
          ACCORDING       AUTO
          TO              SIZED
          CONTENTS        TOP-ALIGNED
          TOP-ALIGNED     CONTENTS
          SOME            PADDING
          PADDING TO      MY LEFT
          MY LEFT AND     AND RIGHT
          RIGHT
csshtml

Answer №1

To ensure proper alignment, you need to apply the vertical-align:top property to the parent (column) div and also to the span elements inside. Using display:inline-block will adjust the width and height automatically, similar to an inline element, while the default vertical alignment setting is baseline.

http://jsfiddle.net/AbcDe/2/

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

Tips for eliminating the gap between a heading and column in Bootstrap 4

.rowHeight{ height: 100px; } .padding-0 { padding-right: 0px; paddig-left: 0px; margin-left: 0px; margin-right: 0px; } .cart{ ...

htmlcssbootstrap-4

What is the process for applying a class in jQuery to empty HTML elements?

Working on a WordPress/PHP website and looking to dynamically add a class when child elements are empty? This is the HTML structure: <div class="featured-block"> <a href="/" class="featured-block__item cf"> <div class="featured-bl ...

javascriptjqueryhtml

Is it possible for an AngularJS controller to connect a scope variable within it to an HTML file, and then utilize the variable to display content in the HTML file?

When exploring directives, I came across examples of rendering an entire HTML file within the directive. There are also instances where controllers render HTML snippets as scope variables, enclosed in single quotation marks - like $scope.items = '&l ...

htmlangularjstemplatescontrollerrender

Retrieve data from the table and dropdown menu by clicking a button

A script is in place that retrieves data from two columns (Members, Description) dynamically from the table upon button click. Table html Here is the JQuery code responsible for extracting values from the table: $(function() { $('#myButton') ...

javascriptjqueryhtml

Fixing the alignment of the left column table in Bootstrap 3.3.7

Is there a way to fix the left table column (date and all column names) in Bootstrap 3.3.7? I attempted to use position: fixed; but it didn't work as expected. Any suggestions on what I should do next? Check out this fiddle for reference <scr ...

jqueryhtmlcsstwitter-bootstrap

Unique background image tailor-made for each radio button

Looking to create radio buttons with buttonset that have unique icon backgrounds for each button. Open to options other than buttonset if available, but assuming it needs to be used. Key requirements: No radio button icon Rollover effect Icon background ...

jquerycssjquery-ui

Moving from a static full screen div to a dynamic relative position with a smooth transition and animated effects

I am in need of a div element that initially occupies the entire viewport. After a specified delay, this div should transition to a relative position and adjust its dimensions to fit the width while maintaining a 16/9 ratio. The transition must be smooth a ...

cssanimationcss-animationstransition

Switch or toggle between colors using CSS and JavaScript

Greetings for taking the time to review this query! I'm currently in the process of designing a login form specifically catered towards students and teachers One key feature I'm incorporating is a switch or toggle button that alternates between ...

javascriptjqueryhtmlcss

Automating link clicking on a webpage using Selenium and Python based on text or style characteristics

Struggling to navigate the bet365.com website, particularly with the page that lists all horse races happening today. The URL in question is . My goal is to click on one of the race links displayed on this page. Below is the HTML source code: < div cl ...

pythonhtmlseleniumxpathbeautifulsoup

Scroll-triggered Autoplay for YouTube Videos using JQuery

Issue: I'm trying to implement a feature where a YouTube video starts playing automatically when the user scrolls to it, and stops when the user scrolls past it. Challenges Faced: I am new to JavaScript web development. Solution Attempted: I referre ...

javascriptjqueryhtmlyoutube

Tips for avoiding a split in the bootstrap navbar when collapsed

I've been searching for hours and still can't figure it out, so I'm really hoping someone can help me solve this before I embarrass myself. My goal is to create a navigation bar similar to the one on steamdb, where the search box remains vi ...

csstwitter-bootstrapnavbarbootstrap-5

Center text vertically within an HTML Bootstrap row

I am creating a Bootstrap row with three columns - col-sm-2, col-sm-8, and col-sm-2. In the first column, I plan to insert a card, in the second column some text, and in the third column a tooltip. This row will be repeated multiple times. As a beginner ...

htmlcssbootstrap-4

Organize a series of <span> elements into rows and columns through the use of CSS, JavaScript, or jQuery

Task: Your challenge is to display a list of span elements in both vertical and horizontal layouts without altering the HTML structure. Input: an unknown number of span elements within a parent span like the example below: <span id="parent"> <sp ...

javascriptjqueryhtmlcss

Limit pasted content in an Angular contenteditable div

Is there a way to limit the input in a contenteditable div? I am developing my own WYSIWYG editor and want to prevent users from pasting content from external websites and copying styles. I want to achieve the same effect as if the content was pasted into ...

javascripthtmlangulartypescriptwysiwyg

What is the method for executing a server-side script without it being transmitted to the browser in any way?

Although the title may be misleading, my goal is to have my website execute a php file on the server side using arguments extracted from the html code. For example: document.getElementById("example").value; I want to run this operation on the se ...

javascripthtml

The font background color appears to be malfunctioning

body { margin: 0; background-color: white; background: linear-gradient(to right, #000000, #ffffff, #ffffff, #000000); line-height:25px; } h2{ color: black; text-align: center; display: block; font-family: 'Montserrat', san ...

htmlcssbackground-color

Tips on how to achieve a 50% width within a bootstrap input group

Need help setting the width of a select tag <div class="input-group"> <select class="form-select" style="width: 50%;"> <option selected value="dummy">Dummy</option> <opt ...

cssbootstrap-5

Apply a different color to every other header using the nth-child selector

I'm attempting to create alternating color headers without defining multiple header styles. I've opted to use the nth-child selector for this purpose, but I'm having trouble achieving the desired colors. JSFiddle: http://jsfiddle.net/CRh6L/ ...

htmlcsscss-selectors

Site optimized for mobile devices

I need to create a website that is optimized for mobile devices like Android, iPhone, and Blackberry, as well as desktop and tablet. The screen resolutions of these devices can vary greatly. My supervisor has suggested developing one site that can adjust ...

phpcss

Issue with connecting Drupal 8 theme styling to website pages

Although the theme is functioning properly, the CSS styles are not being applied. Even when inspecting the developer console in Firefox, there seems to be a disconnect with the page. I verified that manually applying the CSS through the developer console i ...

htmlcssdrupaldrupal-8