What is causing the divs to not stretch across the entire width of the parent div?

Interactive Code Example:

Snippet:

<div style="width: 100%; overflow: hidden; height: 65px; background: #00CC00;">
    <div style="width: 60%; overflow: hidden; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;">

        <span style="font-size: 35px;display: table-cell;vertical-align: middle;">My Introduction</span>
    </div>
    <div style="width: 40%; overflow: hidden; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center; display: table; vertical-align: middle;">
        <span style="font-size: 20px;display: table-cell;vertical-align: middle;">My Role</span>
    </div>
</div>

Capture of the Output:

https://i.sstatic.net/UniqueImage.png

What could be causing the unexpected green gap towards the end of the displayed content? The coding demonstration was carried out using Chrome.

htmlcss

Answer №2

It seems that in Chrome, the outer div is slightly wider than the inner divs by one pixel.

If you are using display: table; and display: table-cell; just for vertical centering, you can achieve the same without it. Here is an example:

<div style="width: 100%; height: 65px; background: #00CC00;">
  <div style="width: 60%; float: left; background: #3074A3; color: #EDEDED; height: 65px; text-align: center;">
    <span style="font-size: 35px; line-height: 65px;">My Name</span>
  </div>
  <div style="width: 40%; float: left; background: #266996; color: #EDEDED; height: 65px; text-align: center;">
    <span style="font-size: 20px; line-height: 65px;">My Job</span>
  </div>
</div>

Edit: Another code snippet demonstrating vertical centering using absolute positioning and transform: translate:

.outer {
  height: 65px;
  background-color: #00cc00;
  display: flex;
}
.inner {
  width: 60%;
  float: left;
  background: #3074A3;
  color: #EDEDED;
  height: 65px;
  text-align: center;
  font-size: 35px;
  position: relative;
}
.inner + .inner {
  width: 40%;
  background: #266996;
  font-size: 20px;
}
.inner > span {
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
<div class="outer">
  <div class="inner">
    <span>My Name</span>
  </div>
  <div class="inner">
    <span>My Job<br />Great work!</span>
  </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

Replace the image source with a list of images

I am looking to create a dynamic image list using either an array or an HTML list. When I hover over an image, it should change one by one with a fade or slide effect, and revert back to the default images when I hover out. Question 1: What type of list s ...

javascriptjqueryhtmlcssimage

Why isn't my CSS transition animation working? Any suggestions on how to troubleshoot and resolve

I am looking to incorporate a transition animation when the image changes, but it seems that the transition is not working as intended. Can anyone provide guidance on how to make the transition style work correctly in this scenario? (Ideally, I would like ...

javascripthtmlcsssass

Modify the input value when using the get_search_form() function in Wordpress

After experimenting with the latest get_search_form() function in WordPress, I've encountered an issue where I can't figure out how to remove the text label from the search submit button. Does anyone have any suggestions or solutions for this pr ...

csswordpressinputsubmit

Discovering the identification of a comment in JavaScript

Here is the code snippet I am working with: <a onclick="lel($(this),'212345555')" class="button"> <a onclick="lel($(this),'241214370')" class="button"> <a onclick="lel($(this),'248916550')" class="button"> & ...

javascriptjqueryhtmlcss

Unable to retrieve data from the database within PHP code

I have successfully built a shopping cart website utilizing SQL, HTML, and PHP. Below is the code snippet for the 'Add to Cart' button: <form method="post" action="cart.php" class="form-inline"> <input type="hidden" value="&apos ...

javascriptphphtmlcsssql

Using jQuery AJAX to preload GIF images for CSS background-image loading

For some time, I have been utilizing jQuery AJAX to preload GIF images with the following code: $("#images").html("<img id='loader' src='../img/ajax-loader.gif' />"); Now, I am attempting to achieve a similar effect (such as a s ...

jqueryajaximagepreloadercss

What could be the reason for the hover class not functioning properly in Tailwind?

Looking for some help with styling a button in Next.js using Tailwind. Specifically, I want the background color of the button to change when hovered over. I've been experimenting with code like this: <button className="rounded-full bg-gradie ...

cssnext.jshovertailwind-css

jQuery - class remains unchanged on second click event

Operations: Upon clicking on an element with the class thumb_like or thumb_unlike, a like will be added or removed for the image using a POST request. The element with the class thumb_count will increase or decrease based on user actions. For example, lik ...

javascriptjqueryhtml

Transfer or duplicate an SVG image from the bottom div to the top div

Is there a way to move a div from the chart_div to the movehere div? I've tried duplicating it below the current svg, but I'm having trouble targeting just the header row ('g' element) specifically. Here is the HTML: <script type= ...

javascriptjqueryhtmlcsssvg

Can you explain the purpose of the URL function in the context of url("#foobar"

Currently, I am developing a CSS concatenator and one of the tasks involved is URL to absolute URL rewriting. For this process, I exclude any absolute URLs that start with http, https, etc. In the case of Django projects, they designate the following URL ...

css

Syncing Facebook Likes with Safari on iPad

Encountering an issue with the Facebook like button alignment specifically in Safari on iPad. It displays correctly in Safari on OSX. Check out this example. Any ideas on what CSS is needed to ensure it's left aligned in one row on the iPad? ...

cssalignmentfacebook-like

Is it possible to retrieve all website links from a page in plain text format?

I am looking to extract all URLs from a web page, regardless of whether they are clickable links or not. For instance, the page source could look like this: <html> <title>Random Website I am Crawling</title> <body> Click <a ...

phphtmlregexstringweb-crawler

Arranging elements in a list according to their position on the canvas using AngularJS

I am currently working on drawing rectangles on an html5 canvas using the JSON format provided below. My goal is to sort the array based on the x and y locations of each element. { "obj0": { "outerRects": [ { "outerRectRoi": { "x1": 0, " ...

javascriptangularjshtmlsortingcanvas

Is there a way to convert basic less code into CSS using VS2012 and Web Essentials?

I'm encountering an issue with the following less code: .aa { > { li { color: red;} } } After running this in Visual Studio 2012 with the latest web essentials, I am getting a compiler error on line 2. Is this really correct? As f ...

cssvisual-studio-2012less

Enhance your Zara shopping experience with the dynamic image zoom-in

I am currently exploring ways to replicate the image zoom-in feature seen on Zara's product pages. To see this effect in action, visit their site: Upon clicking on the image, it opens up in a popup window where it is enlarged to fit the entire screen ...

jquerycssimageweblightbox

After toggling the class, Jquery will no longer select the button

I am having an issue with my jQuery code where I have a button that, when clicked, should switch classes from #testButton to .first or .second. The image toggle shows that the first click works fine and toggles the image, but the second click does not seem ...

javascriptjqueryhtml

Retrieving a tag from bs4.element.tag results in an empty value

As I follow a tutorial to extract answers from a Quora URL, my code is set up like this url = 'https://www.quora.com/Should-I-move-to-London' r = requests.get(url) soup = BeautifulSoup(r.content, 'html.parser') answers = soup.find(" ...

pythonhtmljsonbeautifulsoup

Troubleshooting Bootstrap's Margin Problem

Currently, I am delving into the basics of bootstrap and encountering some challenges with using margin-auto. Specifically, I am working on positioning a navbar by using ml-auto to separate it from the brand, pushing the navbar to the right side of the p ...

htmlcsstwitter-bootstrap

Guide on adding a button to a mat-table in Angular

I am looking to add a delete button or an Angular trash icon to a mat-table in an Angular application. Can anyone guide me on how to achieve this? Here is my current table code: <mat-table #table [dataSource]="ELEMENT_DATA"> <ng-container cdk ...

javascripthtmlangularmat-table

The background image on my link bar is inexplicably not appearing

I've been trying to solve this issue for hours and I'm at a loss. Initially, the background image was displaying correctly, but now it's not working. HTML: <head> <link type="text/css" rel="stylesheet" href="css/normalize.css" ...

phphtmlcssimagebackground