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

What is the best approach to implementing a filter in Vue 2 that is also compatible with Vue 3?

Currently, I am utilizing Vue.js 2+ version and have implemented a date formatting filter to meet my needs. However, I recently found out that Vue 3 has removed the filter functionality in favor of using computed properties or methods. My dilemma now is ho ...

javascriptvue.jsvue-filter

I am encountering an issue while trying to update SQL data from within a Node.js

Using a for-loop to update SQL command is common practice. Here's an example: for(var i=count1; i < count2;i++){ Book.TimeStart = Times[I] console.log(Book.TimeStart) sql = sql + `UPDATE projectroom.Details SET BookingId = `+Book.Bo ...

javascriptmysqlnode.jsbackend

Arranging images next to each other using CSS and HTML

I've been trying to arrange four images side by side, with two on the top row and two on the bottom. I want to ensure they stay consistent across all browser sizes except for mobile. Here is what I have attempted so far: #imageone{ position: absol ...

javascripthtmlcss

Vue warning: Issue encountered in created hook - Attempting to access property 'get' of an undefined variable is causing a TypeError

I encountered an error while using axios: [Vue warn]: Error in created hook: "TypeError: Cannot read property 'get' of undefined" export default { methods: { loadUsers(){ axios.get("api/user").then(data => ...

javascriptphplaravelvue.jsaxios

Utilize CSS to selectively target specific sections of a repetitive pattern within a list

I have come across a list fragment that is generated automatically and I only have the ability to adjust the CSS for it. <ul class="menu"> <li class=" menuItem1 first parent"></li> <li class=" menuItem2 parent"></li> ...

htmlcss

The router should display a component based on the user's access level, even if they are

I'm working on a scenario where the home route needs to cater to both admin and user roles. Is there a way to dynamically display the UserComponent if logged in as a user, and show the AdminComponent if logged in as an admin? This is my current setup ...

javascriptangulartypescript

Execute the function if the text or value begins with a certain character

I'm trying to determine whether the text within a span starts with the letter "x" and then execute a function. I've come across using "^" in strings for this purpose, but am having trouble implementing it to check the text... <span>xfoo&l ...

javascriptjqueryhtmlcontainsstartswith

The error message "TypeError Cannot read properties of undefined (reading 'backdrop') - bootstrap v5.2.1 modal" is indicating that there is an

While working with the bootstrap modal, an error has been encountered ( TypeError Cannot read properties of undefined (reading 'backdrop') ), which has been logged in our bug tracker. However, attempts to replicate this error have been unsuccessf ...

javascripthtmlbootstrap-5bootstrap5-modal

I am in need of assistance in developing an image slider using react.js. Can you help

let projects = [{id: 1, img: "https://scontent-lax3-2.xx.fbcdn.net/v/t1.0-9/117405206_1535037326696077_4967665142447981078_o.png?_nc_cat=111&ccb=2&_nc_sid=730e14&_nc_ohc=XlNXGJF47E0AX8lB1fk&_nc_ht=scontent-lax3-2.xx&a ...

javascriptreactjsimageslidersetstate

Definition in Typescript: The term "value is" refers to a function that takes in any number of arguments of

export function isFunction(value: any): value is (...args: any[]) => any { return typeof value === 'function'; } What is the reason behind using value is (...args: any[]) => any instead of boolean ? ...

javascripttypescript

Explore the next page on the API response by navigating to another page

In my next app, I have a versatile function called postAPI, which is used to send requests to the backend server. import Router from 'next/router'; export const postAPI = async ( endpoint, data = {}, headers = {}, method = 'POST&apos ...

javascriptaxiosnext.jsroutesnext-router

Utilize a jQuery class selector to retrieve the value of a textbox through HTMLHelper

How can I retrieve the value of "StudentID" in a JavaScript function using jQuery? HTML: <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Student.Models.vwStudent>>" %> <div class="divClass"> ...

javascriptjqueryasp.net-mvcpartial-viewshtml-helper

Ensuring the Jquery Datepicker restricts selecting dates later than or equal to the start date (

I have a specific requirement where I need to implement two date pickers for entering "From" and "To" dates. The "ToDate" selected should be greater than or equal to the "FromDate" (after selecting a from date, all previous dates should be disabled in the ...

javascriptjquerydatetimepicker

Tips for setting up a grid where boxes have a consistent width but varying heights to maximize space utilization

Seeking design inspiration from Pinterest, where fixed width columns are used but each grid item fills all available space with varying heights. Check out this example: Initially considered using flexbox for this layout, but faced some challenges. Here&ap ...

gui-designhtmlcss

Converting javascript html object lowercase

Is there a way to dynamically adjust the height of specific letters in my label? Right now, I am overriding the text for the elements: let element = document.getElementById('xxx') element.textContent = 'Label' I attempted using <sup ...

javascripthtmlangular

The first time I tried using React-app, I encountered an error that read "[email protected] postinstall"

I've been struggling to set up create-react-app, encountering the same issue repeatedly. I tried uninstalling and reinstalling node.js, but only the package.json and my-app folder were created. No src or other required folders were generated. Termina ...

javascriptnode.jsreactjsnpm

The dollar sign function operates properly, but encountering issues with the $.ajax function (non-slim)

I'm facing some issues with my jQuery code. I have included jQuery (not slim) and for some reason, $.ajax is failing. However, '$' and 'jQuery' functions are working fine. It seems like a simple problem but I can't seem to fi ...

javascriptjqueryajax

Are MobX Observables interconnected with RxJS ones in any way?

Is the usage of RxJs observables in Angular comparable to that in React and MobX? I'm struggling to find information on this topic. ...

javascriptangularreactjsrxjsmobx

Error message: The module '@project-serum/anchor' does not export the object 'AnchorProvider' as intended

I encountered an issue while attempting to run my react application. The issue: Attempted import error: 'AnchorProvider' is not exported from '@project-serum/anchor'. The import declaration in my code: import idl from './idl.json ...

javascriptreactjsruntime-errorjsxanchor-solana

JQuery Submission with Multiple Forms

Hey everyone! I have a jQuery form with multiple fieldsets that switch between each other using jQuery. Eventually, it leads to a submit button. Can someone assist me by editing my jfiddle or providing code on how I can submit this data using JavaScript, j ...

javascriptjqueryhtmlajax