100% width is applied to the table cell within the div element

Below is the code I am working with:

<div style='display: table'>
    <div style='height:200px; width:100%; text-align: center; display: table-cell; vertical-align: middle'>No result found</div>
</div>

I'm facing an issue where the width:100% property doesn't seem to be working as expected. How can this be resolved?

Answer №1

One way to ensure the child element takes up full width is by setting width: 100% on its parent.

<div style='display: table; width:100%; background:#f00;'>
    <div style='height:200px; width:100%; text-align: center; display: table-cell; vertical-align: middle'>No result found</div>
</div>

Answer №2

Give this a shot. The container div should fill 100% of the parent width. Then we can adjust the child elements accordingly.

<div style="display: table; width: 100%;">
<div style="height: 200px; text-align: center; display: table-cell; vertical-align: middle; width: 100%;">No results were found.</div>
</div>

Answer №3

Could you give this a shot?

  <!-- This is the main div that needs to have width set for the element -->
 <div style="width:100%;display: table;"> 
   <!-- The child div will inherit the width of the parent element if not specified. You can customize its width to be smaller than the parent div if desired -->
   <div style='height:200px; width:100%; text-align: center; display: table-cell; vertical-align: middle'>No results were found</div>
 </div>

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

Encountering a NaN outcome when summing values from various select options

I'm working on a project that involves adding up the prices based on the surface chosen by the user. I'm struggling with calculating the partial cost when the user's choice changes. totalSum.ts num: Calculation totalAmount: number cate ...

WordPress Ignoring PHP Generated Elements When Processing Divs

Whenever I attempt to utilize the get_date function, it seems to disregard all div elements and instead places itself right after the header, at the beginning of the <div class="entry-content">. <div class="entry-content"> May 16, ...

Exploring the world of web scraping using R's XML package with the powerful xpathS

I need help extracting the names of shopping malls from a specific website. The URL is provided here: After examining the html code, I noticed that the mall names are stored under the "h5" tag. I tried to extract the text using the following codes, but it ...

Invoke a JavaScript function once the div has finished loading

After clicking on a radio button, I am dynamically loading a div element. I want to hide a specific part of the div once it is loaded. $(function($) { $('.div_element').on('load', function() { $('.textbox').hide(); } ...

Slate Map by Google Navigation

I have a situation here that is similar to the grey maps, except all the buttons are visible. Everything appears normal except for the Map tiles, which are all grey! It's strange because it loads nicely at zoom level 8 and then zooms in to the maximum ...

Restrict User File Uploads in PHP

I have a system set up that enables users to upload files under 200 MB. Once the file is downloaded once, it will be automatically deleted. Additionally, all files are deleted from the server after 24 hours. I am looking for a way to limit the number of up ...

Is there any way to remove the two default aspNetHidden Divs in asp.net web forms?

After creating an empty webform page in asp.net, the generated code looks like this: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Threetier.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org ...

The MIME type 'text/html' is incompatible with stylesheet MIME type and is not supported

I have exhausted all possible solutions for the issue, from specifying the type for <link rel="stylesheet" href="./style.css" /> to using app.use(express.static('public')), but unfortunately, none of them seem to resolve the problem. index ...

Tips for Aligning Images of Various Sizes in the Center of a div

My images are displayed in a horizontal line, but some have different sizes. I want to center all the images within their container div for a better look. Is there a way to do this automatically with CSS so that the images remain centered regardless of siz ...

What could be causing the disappearance of my <Div> when applying a Class to the contained <span>?

My goal is to showcase a variable on my HTML page using CSS for a Graphical display in OBS streaming software. Whenever I apply the class .wrappers to the span id p1Name (and p2Name), the text disappears from the HTML output in OBS. I'm puzzled as to ...

The layout in Next.js production builds appears to be distinct from the layout in the

Currently, I am working on a website where I have implemented a dark theme by adding a class to the body element. Everything is functioning perfectly in the development environment, but I am encountering issues in the production build. Here is the root l ...

To ensure that any changes made to data are reflected automatically when viewing data in Angular 2

In the process of developing an Angular 2 application, I encountered a scenario that requires special attention. The data displayed on the view is fetched from an API, with certain fields being editable by the user. These modifications can be saved using ...

Looking to include some extra padding when an item is displayed - jQuery

So, I'm working on a jQuery code snippet that controls the visibility of a rectangle element: $("#rectangle").hide(); $("#toggle-rec").click(function () { $("#rectangle").toggle(2000); }); This code hides the rectangle initially and toggles it ...

Implementing CSS counter-increment with jQuery

Is there a way to use jQuery to set the CSS counter-increment attribute on ".demo:before" even though jQuery cannot access pseudo elements directly? I recall seeing a suggestion on Stack Overflow about using a data attribute and then referencing that value ...

Create a webpage in full screen mode with a video player that fills the entire screen

Here is the HTML code I am working with: <div id="container"> <video id="video" src="video.ogv" loop></video> </div> The "container" div and video element occupy the entire screen. #container { po ...

Is it possible to notify the user directly from the route or middleware?

In my current setup, I am utilizing a route to verify the validity of a token. If the token is invalid, I redirect the user to the login page. I am considering two options for notifying users when they are being logged out: either through an alert message ...

"Exploring the best locations for storing CSS, JS, and image files in Spring

Having trouble figuring out where to place my public files. I attempted the solution mentioned in this thread on Stack Overflow but it didn't work for me. I've tried putting my public folder in various locations within the WEB-INF directory, but ...

Looking for a JavaScript snippet to insert the word "Search" into an empty DIV element with the specified id attribute

I am trying to insert the word "Search" into an empty input field with the id "ReportQuery" using JavaScript. Unfortunately, I do not have access to the HTML code directly. How can I achieve this task through coding? Below is the snippet of code that nee ...

Is it possible for CSS in React to cause the vanishing of all buttons

I'm encountering an issue where the CSS styling applied to every button in my NavBar is causing a specific button labeled 'Search' to disappear when it shouldn't. The problem stems from NavBar.css, which contains a media query that unin ...

ShadowBox replacement for IE8

After much experimentation, I am on the verge of achieving an inset box shadow for IE8 without relying on JavaScript. Take a look at the screenshot below: Since Internet Explorer versions 5.5 through 8 only support Microsoft's "dropshadows" and "sha ...