Arranging three divs in a row without using flexbox

Struggling to align three divs horizontally? The first div should take up 100% of space, the second has a fixed width (160px), and the third's width depends on its content size (though it could work with a fixed width).

I attempted using display: table for rows and table-cell for columns. Link to code here: https://codepen.io/anon/pen/RLjGab

The setup works fine in Chrome but causes layout issues in other browsers when content is added. Need a solution that works in IE9 without flexbox. Any guidance would be greatly appreciated. Thanks!

Answer №1

After some tinkering, I discovered the solution: simply including vertical-align: middle; in the column resolved the issue.

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

Choose an item that does not have any offspring

I am facing an issue with a webpage that contains either of the following: <span id='size'>33</span> Or <span id='size'> <b>33</b> <strike>32</strike> </span> I need to extract ...

Ways to retrieve the parent DIV's width and adjust the child DIV's width to match

Attached is my question with the HTML and a screenshot. Within a DIV container (DIV with ID=ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d_ctl00_pnlParentContainer), there are two inner DIVs - one for the left column TITLE (DIV ID=dvTitles) and the other f ...

What is the process for inserting fa fa icons within a text input field?

Struggling to place a fa fa icon inside an input text box for my Angular 4 project. Despite trying various solutions from Stack Overflow, none have proven successful. Here is the code I have attempted: <div class="form-group has-feedback"> <input ...

Simple Jquery image rotator generating two galleries side by side

Currently, I am encountering an issue where I am unable to configure the Jquery rotator from Easy Jquery Auto Image Rotator and script source Google jquery.min.js I attempted to give the second gallery a different class and duplicated the js script. ...

Fancybox2 does not have a scrollbar feature, but you can customize the size

I've been struggling to hide the scrollbar in fancybox. I attempted the solution provided in this link but unfortunately, it did not work for me. The specific page I am working on is My goal is to have a fixed size and no scrollbar visible when fan ...

Design a hover zone that allows for interaction without disrupting click events

I am looking to create a tooltip box that appears when hovering over an element, and I want the tooltip to only disappear when the user's mouse exits a specific custom hover area outlined by a vector graphic. My current implementation is working, but ...

Achieving distinct CSS margins for mobile and desktop devices in a Django template without the need for multiple {% block content %} statements

Is there a way to dynamically change the margin-left of my main {% block content %} in the base.html template based on whether the viewer is using a mobile or desktop device? This is how my current base.html looks like: <div class="content container-f ...

A guide on harnessing the power of anchor tags and route parameters to retrieve JSON data based on a specific ID

As a newcomer to Angular, I've been putting in the effort to grasp the concepts. However, I've hit a roadblock when it comes to utilizing an anchor tag to navigate to a specific ID in a JSON file, and I'm unsure of how to proceed. <div n ...

Tips on avoiding a disconnection when ESC key is pressed?

After pressing ESC, the browser's server connection may break unless there is another request, such as user input or an ajax request. I have encountered a problem where pressing ESC while uploading a file to the server causes the upload process to ha ...

Two pages with contrasting fonts but identical CSS styling

Within my website, I have utilized the code font-family: 'Caesar Dressing',cursive,"brushsci"; However, it appears that two different fonts are being displayed on two separate pages. Please take a look at the font styles in the header menu of t ...

Having trouble with a CSS selector within a JSP page when attempting to dynamically set the background of a div

Currently, I am in the process of developing an image uploader feature that will enable users to upload images and set them as backgrounds for a div element. Specifically, the .mm11 class represents a post-it style card that initially does not have a backg ...

Rails app automatically loading asset files

In the process of developing my Rails application with Twitter Bootstrap, I encountered an interesting situation. After adding a blank "custom.css" file to the "app/assets/stylesheets" folder, everything seemed normal. It wasn't until I customized the ...

Tips for resolving the issue of "Text stays in original position while image changes in the background when hovering over the text."

I'm currently working on a website and I have a question regarding how to make text stay in position while hovering over it (inside a span), and at the same time, display an image in the background that allows the text to overlay it. HTML: <ht ...

Creating a unique custom "Ask Seller" button on Ebay can be done by

Currently in the process of revamping a custom sales page for my store and I'm interested in adding a button that says "Inquire With Seller". Despite my efforts to search online, there hasn't been much information available on how to approach thi ...

Looking to adjust the alignment in BootsFaces? Want to move the final link of the navbar to the right corner?

<?xml version="1.0" encoding="ISO-8859-1" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.c ...

get the second child element using javaScript

Alright, I am working on a school assignment where I have 4 containers. When you click a button in a container, a popup shows the image and heading of the container you clicked on. I have figured out how to get the image to display, but I'm struggling ...

Struggling to properly position a checkbox within an Angular Material project

<div class="checkbox-password"> <div> <mat-checkbox class="example-margin">Remember me</mat-checkbox> </div> <div> <a routerLink="/forgotPassword" class="createAccount" ...

Safari causing rotated element to shift by 1px due to CSS3 Transition

Encountering a rendering issue in Safari with 180deg rotated elements. Two examples highlight the problem (tested on Safari 9.1): Odd width problem. The bottom element shifts to the right initially, and further on transition. Even width problem. It appea ...

What is the regular expression pattern for capturing all option tags in HTML?

My message is presented below. <OPTION / value/3D70>Airport</OPTION> <OPTION value/3D81>Akuressa</OPTION> <OPTION value/3D32>Ambalangoda</OPTION> <OPTION value/3D65>Ambalantota</OPTION> In order to extract ...

[Vue alert]: "Maximum" property or method is not declared in the instance but is being referenced during the rendering process

Here is my custom Vue component: Vue.component("product-list", { props: ["products", "maximum-price"], template: ` <div> <div class="row d-flex mb-3 align-items-center p-3 rounded-3 animate__animate ...