Step-by-step guide to layering two divs within a table cell

Here is the code I am working with:

<td class="mobile-user-icon">
    <span class="mobile-photo">background text</span>
    <span class="mobile-caller-mute">overlay text</span>
</td>

.mobile-user-icon {
    width: 64px;
    height: 64px;
    text-align: center;
    background: grey;
    color: white;
    vertical-align:middle;
}

I am trying to place mobile-caller over mobile-photo, all while keeping both aligned vertically using vertical-align:middle.

In a regular layout, I would set the parent mobile-user-icon to position:relative and then absolutely position both child elements. However, this method does not work within a table-cell. Any suggestions on how to achieve this?

Check out my attempt on JS Fiddle: http://jsfiddle.net/mFNed/1/

htmlcss

Answer №1

To ensure proper vertical alignment of the elements, consider adding a relative position to .mobile-user-icon:

.mobile-user-icon {
    width: 64px;
    height: 64px;
    text-align: center;
    background: grey;
    color: white;
    vertical-align: middle;
    position: relative;
}

Since the table cell has a fixed height, you can use the CSS line-height property for vertical alignment. Apply the following CSS to the <span> elements within .mobile-user-icon:

.mobile-user-icon > span {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    vertical-align: middle;
    line-height: 64px;
}

jsFiddle Demo

Answer №2

Applying the style float:left to your cells is a solution that should resolve the issue.

Please take a look at the updated link in the following URL where I have made modifications to your fiddle:

http://jsfiddle.net/mFNed/5/

.mobile-caller-mute {
    float:left;    
}

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

HTML formatting for text

I recently created an HTML website using Dreamweaver. I faced an issue while trying to design a section within an article using tables to incorporate both text and images. Unfortunately, the tables did not have rounded edges as I desired. I am reaching out ...

htmlcsshtml-tableformatting

Expanding the outer div horizontally by using inner divs with scroll

Is there a way to ensure that all child divs are displayed on the same line within the outer div without wrapping to a second line? The width of the outer div should be fixed so that a scrollbar is visible, allowing us to scroll and view all inner divs. h ...

css

How to Develop Screen-Reader-Friendly Ordered Lists using HTML5 and CSS?

Ensuring accessibility is a top priority for the project I'm currently working on. One aspect that is frequently discussed is how to mark up parts of an ordered list appropriately. I have created a jsfiddle demo showcasing referencing an ordered list ...

csshtmlaccessibilitysection508wcag2.0

Using Jquery to loop through various select options within a designated container div

I am seeking a way to loop through multiple select options within a specific div using the jQuery each function. If any field is left empty during this iteration, I would like the loop to break and set the reqCourseFlag variable to 0. The current implement ...

javascriptjqueryhtmlloops

Websites are operating at a sluggish pace

Yesterday, out of nowhere, we encountered a vserver issue. If you visit this particular Website: You will notice that it takes forever to load. This problem is affecting all websites hosted on the vserver. I reached out to the Provider to see if there we ...

htmlmysqllinuxapachewebserver

Performing two consecutive nested AJAX requests in jQuery using JavaScript

I am facing an issue with my code. My goal is to create a cryptocurrency ranking feature on my website. I have integrated an API that provides logos, symbols, indices, prices, etc. of cryptocurrencies. However, I encountered a problem as this API doesn&apo ...

javascriptjqueryhtmlajax

Page refresh enhances hover effect style

Is there a way to maintain a "hover" style even after a page refresh if the user does not move their mouse? The hover effect is only activated on mouse enter/mouseover events, so when the page refreshes, the style doesn't persist unless the user inter ...

javascripthtmlcss

Switch between two AppBars simultaneously while scrolling in Material UI

In my Header.js component, I have two AppBars. The first one is sticky and the second one is not initially visible. As we scroll down, I want the second AppBar to collapse and the first one to stay stickied at the top of the screen. I looked at the Materi ...

javascriptcssreactjsmaterial-uiappbar

Animation does not trigger before switching pages

I'm attempting to create an animation that occurs before the page transitions. After finding a jQuery script on this site and tweaking it to match my HTML, I realized the code works in a fiddle but not on my actual page. Any assistance would be greatl ...

jqueryhtmlcssweb

What is the best method to transfer and incorporate essays and information onto my HTML page?

Here are some unique events and observances for the month of December: DECEMBER 1 World AIDS Day National Pie Day National Eat a Red Apple Day Bifocals at the Monitor Liberation Day Day With(out) Art Day Rosa Parks Day DECEMBER 2 International Day for th ...

html

Sticky sidebar that adjusts to viewport size in a responsive layout

When designing a CSS fluid layout, most divs utilize percentages to adjust based on the viewport size. However, I have a specific scenario where I need my sidebar to maintain a fixed position. For instance: <aside style="width:25%; float:left; positio ...

csscss-positionfluid-layout

What is the best way to adjust my column position in order to make the links clickable?

Looking for help with a mobile version website menu bar design. The issue is that the central "+" button is covering the two icons on either side, making them unclickable. Is there a solution to rearrange this layout? Here is the current design: https:// ...

htmlcssbootstrap-4

When clicking on the text areas, the Twitter-Bootstrap drop-down login automatically closes

Greetings! I am currently working on my first website design using JQuery. My project includes a dropdown login box created with Twitter-Bootstrap. Unfortunately, I'm facing some challenges with the JQuery script that controls the behavior of the logi ...

javascriptjqueryhtmltwitter-bootstrap

Navigate to items within a content block with a set height

I have a <div> that has a fixed height and overflow-y: scroll. Inside this div, there is mostly a <p> tag containing a long text with some highlighting (spans with background-color and a numbered id attribute). Just to note, this is an HTML5 a ...

javascriptangularjshtml

Angular renders HTML elements

Greetings! I am currently experimenting with using AngularJS for the frontend and Wordpress as the backend of my project. To load content from Wordpress into Angular, I am utilizing a JSON wordpress plugin along with making $http requests. The content th ...

javascripthtmlwordpressangularjs

Guide on utilizing regular expressions to match CSS selectors

Attempting to determine if the head section in jQuery contains the font-weight:bold property within CSS. That particular property may exist in 4 different variations: font-weight:bold font-weight: bold font-weight :bold font-weight : bold Is there a way ...

cssregex

Content from ajax request is invalid

Currently, I am facing an issue with loading a comment list and replacing the existing list on my HTML page with the new one. Previously, I used to load a simple XML list, iterate over its elements, and generate content. Although this method worked fine, i ...

jqueryhtmlajax

Guide to creating a toggle button

Can someone help me create a button that toggles between displaying block and display none when clicked? I've been trying to use Classlist.toggle with JavaScript, but I'm not sure if I have the correct classes targeted. let showCart = documen ...

javascripthtmlcss

Using Python, Selenium, and Beautiful Soup to scrape LinkedIn data while being logged in and accessing user accounts

I have reached a point in my script where I am able to access a search page of profiles on LinkedIn. However, I am encountering difficulty in actually accessing these profiles. When attempting to view a profile, LinkedIn displays a message stating "You d ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Stop the recurrence of multiple clicks by incorporating a Bootstrap modal popup confirmation

$('button[name="remove_levels"]').on('click', function (e) { var $form = $(this).closest('form'); e.preventDefault(); $('#confirm').modal({ backdrop: 'static', ...

javascriptjqueryhtmlmodal-dialogbootstrap-modal