When using CSS float:left and overflow:visible, the text may get cropped-off at

I'm currently experimenting with creating a color gradient in javascript using numerical values within some of the divs to indicate scale. However, I've run into an issue where as the values get larger, they are cut off due to the float:left property. I also tried using display:inline-block, but that resulted in strange positioning and gaps between the divs. What I'm looking for is a way to have the divs aligned closely together while allowing the text to overflow onto the next div. Is there a solution to achieve this?

You can see both examples mentioned here:

http://jsfiddle.net/y3LTZ/3/

<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:green;"></div>
    <div style="width:20px;height:100%;overflow: visible;display:inline-block;background-color:red;">texts</div>
</div>

and

<div style="overflow: visible; width: 600px; height: 30px;white-space: nowrap;">
    <div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
    <div style="width: 20px;height:100%;float:left;background-color:green;"></div>
    <div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
    <div style="width: 20px;height:100%;float:left;background-color:green;"></div>
    <div style="width: 20px;height:100%;float:left;background-color:red;">texts</div>
</div>

Thank you!

javascriptcsscss-floatoverflow

Answer №1

Check out the demo here

Showcasing the use of inline-block

Here is the HTML code snippet:

<div class="wrapper">
    <div class="single-block red">texts</div>
    <div class="single-block green"></div>
    <div class="single-block red">texts</div>
    <div class="single-block green"></div>
    <div class="single-block red">texts</div>
</div>

The corresponding CSS code is as follows:

.wrapper{
    width: 600px; 
    height: 30px;
    white-space: nowrap;
    font-size:0;
}
.single-block{
   width:20px;
   height:100%;
   display:inline-block;
   vertical-align:bottom;
    font-size:16px;
}
.red{
    background-color:red;
    position:relative;
}
.green{
    background-color:green;
}

Answer №2

To make the text overlap the div below, you must apply the CSS property position:absolute;

<div style="position: relative; overflow: visible; width: 800px; height: 50px; white-space: nowrap;">
    <div class="box" style="background-color:blue;">
        <div class="text-above">text</div>
    </div>
    <div class="box" style="background-color:yellow;"></div>
    <div class="box" style="background-color:blue;">
        <div class="text-above">text</div>
    </div>
    <div class="box" style="background-color:yellow;"></div>
    <div class="box" style="background-color:blue;">
        <div class="text-above">text</div>
    </div>
</div>

CSS:

.box {
    width:30px;
    height:100%;
    overflow: visible;
    float:left;
    z-index:0;
}

.text-above {
    position:absolute;
    z-index:999;
}

Check out the Jsfiddle example: http://jsfiddle.net/p3YZU/9/

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

Is there a way to determine if a file is an audio or video file using Vue.js by examining its URL?

I am currently working on a Vuetify playlist that contains a mix of audio and video media files. My goal is to create functionality that allows me to launch a video player if the file is a video, or utilize the html5 audio component for .mp3 files: ...

javascriptvue.jsvuetify.js

Sending files through ajax with php

Hey there! I've been working on uploading files using Ajax and PHP, following a tutorial. Here's the code I have so far: upload.js: var handleUpload = function (event){ event.preventDefault(); event.stopPropagation(); var fileInput= document.ge ...

javascriptphpajax

Using an Ajax Post request to trigger a JavaScript function

Looking to execute a JavaScript function with a PHP variable, I utilized an AJAX request to send the variable named [filename] for executing the JavaScript function as follows: upload.php <script> function prepareforconvert(filenamse){ ...

javascriptphpjqueryajax

Order Up: Vue Draggable Next feature keeps your lists in line

I need to maintain the order of two lists in local storage so that their positions are saved and retrieved between sessions. In my Vue 3 TS project, I am utilizing this library. Check out the code snippet below: <template> <div> <h3> ...

javascriptvue.js

Modifying the content of JSON key values

In my application, I am using MongoDB, Express, and MongoDB. When receiving data on the server side, it comes in the form of an array of objects (JSON) named upProbations. For example, let's say I find information about Max: [ { Name ...

javascriptnode.jsarraysjsonmongodb

The Shopify CLI's node serving function has not been operational for a project that is one year old

As I embark on refactoring my previous Shopify project, I encounter an issue when executing the command "shopify node serve" which prompts the following error message. "This command can only be run within node projects." Despite this error message, my pr ...

javascriptnode.jsnext.jsshopifyshopify-app

unable to receive the data transmitted by the socket.io client

I hit a roadblock while trying to follow the tutorial on socket.io. I'm currently stuck on emitting events. Previously, I successfully received the console logs for user connected and user disconnected. However, when it comes to emitting messages, I a ...

javascripthtmlnode.jssocket.io

What is the best way to align the text in the center without centering the numbers in an HTML ordered list?

I am currently working on a small widget for a webpage that displays steps in reverse order. My plan is to use an ol element and adjust the value attribute on each li tag to make the numbering of the ordered list reversed. Everything seems to be going smoo ...

htmlcss

What could be causing the 500 response code when making a request to the NextJS API route within the app directory?

Every time I attempt to access my API route, a 500 Internal Server Error code is returned The origin of the request export const fetchSuggestion = async () => { const response = await fetch('/api/getSuggestion', { cache: 'no-store&ap ...

javascriptnode.jsnext.jsserver-side-renderingnext.js13

What steps need to be taken to set up Node.js to accommodate requests from external sources beyond just localhost?

After creating an application using NextJs, I successfully built it and ran it on a node server by executing 'npm run start' in Powershell. Everything works perfectly when accessing it locally through port 80. However, my Windows Server 2019 does ...

javascriptnode.jsnext.js

Perform a calculation using data from one schema and store the result in a different schema within MongoDB using Node.js

var ItemSchema = new Schema({ name: {type: String}, size : {type: String}, price : { type: Number} }); var SizeSchema = new Schema({ sizeName: {type: String}, dimensions : {type: String} }); F ...

javascriptnode.jsmongodbexpress

What is the best approach to display a fluctuating price depending on specific options chosen in Next.js?

When working with 2 different select tags and rendering images based on the selection, I also want to display a price determined by the options chosen. For instance, selecting "Your Current Division" as Iron and "Your Desire League" as Bronze/Silver/Gold s ...

javascripthtmlcssreactjsnext.js

MUI - Material-table/core - Checkbox selection malfunctioning on click event

UPDATE : The matter also pertains to Material Ui's Data table. I attempted to replicate the issue using the provided example in the documentation but encountered the same problem. I have been struggling with an issue related to the selection feature ...

javascriptreactjsmaterial-uimaterial-table

Is it possible for the $.post function to overwrite variables within the parent function?

Recently, I delved into the world of JavaScript and my understanding is quite limited at this point. So, please bear with me as I learn :-) I am working on a basic booking system that saves dates and user IDs in MySQL. The system checks if a particular da ...

javascriptjquerypost

Is there a way to store a jQuery CSS manipulation within a cookie?

On my Wordpress site, I have a code that allows users to change the font size of the body when they click on one of three generated buttons: <button class='body_standard_font_size'>Standard</button> <button class='body_medium ...

jquerycsscookies

Encountering challenges with concealing a div element

As I'm setting up a table, I want to hide it immediately after creating it without affecting the DOM. Then, when the user selects from a dropdown menu, I show the table and everything works fine. However, the issue arises when I visit the page for the ...

javascriptjquery

Center align the mat-expansion-panel material component in a vertical orientation

When working with the mat-expansion-panel component alongside a mat-accordion, I've encountered an issue where the items are not aligning vertically at the center/middle. I'm unsure of the proper method to achieve vertical alignment for the conte ...

htmlcssangularangular-material

How can you loop through keys and values in a JSON object using JavaScript?

I am attempting to cycle through the JSON data below: { "VERSION" : "2006-10-27.a", "JOBNAME" : "EXEC_", "JOBHOST" : "Test", "LSFQUEUE" : "45", "LSFLIMIT" : "2006-10-27", "NEWUSER" : "3", "NEWGROUP" : "2", "NEWMODUS" : "640" } The keys in this JSON are d ...

javascriptarraysjson

PHP query for beginners. Integrating JavaScript into a PHP webpage

Hey there! I am not familiar with PHP development, as I have never worked with it before. However, I have been tasked with adding a Google Shopping cart tracking code to a website. After someone completes an order, they are sent to finishorder.php. Upon re ...

phpjavascripthtml

Ways to display or conceal various divs by employing an if/else statement?

I am aiming to conditionally display various divs based on certain criteria: Show the "x" div if it's not already visible Display the "y" div only if the "x" div is already being displayed Show the "z" div only if both the "x" and "y" divs are alrea ...

javascripthtmlcss