Utilizing CSS nested spans and setting custom width attributes

I'm curious about how nested spans and CSS handle the width attribute. In the HTML code provided, the 'wide' class sets the width while the 'box' class adds a border. I've noticed that the width is only applied when both classes are used together. Can someone clarify why this happens? I'm relatively new to CSS and may have overlooked a basic rule.

<span class="wide"><span  class="box">Not wide</span></span>
<span class="wide box"><span>Wide</span></span>
<span><span class="wide box">Wide</span></span>
<span class="box"><span class="wide">Not wide</span></span>

View the effects here: http://jsfiddle.net/7hXUu/2/

Any insights would be greatly appreciated, Aaron

cssnestedwidthhtml

Answer №1

The issue seems to stem from the use of float:left;. However, the specific reason for this behavior is unclear.

To address this, consider assigning a width to elements such as span and a using either display:block; or display:inline-block;

Answer №2

When it comes to inline elements, applying widths can be tricky. However, when dealing with floated inline elements, the rendering behavior changes:

If the computed 'width' is set to 'auto', the used value is determined by the "shrink-to-fit" width... In this case, the shrink-to-fit width is: 

min(max(preferred minimum width, available width), preferred width)

But wait, there's more. Each of your floating containers creates a new block formatting context, which impacts how floated elements are positioned. Detailed explanations step-by-step could be provided upon request, but in reality, this would not be practical.

In conclusion: while this may make for an interesting brain-teaser question, it's definitely not suitable for real-world applications.

Answer №3

By using the box class with float: left, the element transforms into a floated element, contrary to the default behavior of span which is an inline element. Keep in mind that the width property does not typically affect inline elements.

To make the width property effective on a span element, you can alternatively apply display: inline-block to it.

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 methods can I use to identify my current page location and update it on my navigation bar accordingly?

My latest project involves a fixed sidebar navigation with 3 divs designed to resemble dots, each corresponding to a different section of my webpage. These sections are set to occupy the full height of the viewport. Now, I'm facing the challenge of de ...

javascripthtmlcssvue.js

Get rid of the drop-down shadow effect

Currently working on a website project for a client and looking to remove the blue "shadow" effect from the dropdown menus. I believe the code that needs editing is as shown below: .main_nav ul.sub-menu { position: absolute; top: 65px; width: ...

cssmenushadow

Can you please provide instructions on how to implement an ng-repeat loop within an HTML table?

<thead> <tr> <th ng-click="sortData('firstname')"> Firstname <div ng-class="getSortClass('firstname')"></div> ...

htmlangularjsangularjs-ng-repeatsingle-page-application

Navigating to the end of the fixed-height table while inserting new elements

I'm experiencing an issue with a function that adds new items to a table with fixed height and overflow: auto set. When new items are added, the scroll should immediately go to the bottom of the table. Unfortunately, this is not happening as expected. ...

htmlvue.jsvuetify.js

Changing button alignment using CSS to create a new line

Currently, I am working on a React project using Material-UI where I am trying to create a numpad. The code snippet below showcases part of my implementation: // some parts are omitted for conciseness const keys = [7, 8, 9, 4, 5, 6, 1, 2, 3, 0]; ...

cssreactjsmaterial-ui

Applying toggle() using css to manipulate various elements at once

Is there a way to toggle multiple divs of varying heights, all with the same class? What is the most effective approach to achieve this? http://jsfiddle.net/hS6RH/41/ $('.smallify').on('click', function() { if ($(this).parent(&apo ...

jquerycss

Tips for displaying span value within asp.net web pages

I have an HTML code snippet that looks like this: <tr> <td> <span>Full Name:&nbsp;</span> </td> <td> <span id="FullName_PDLabel"><b>--</b></span> </td> & ...

htmlasp.net

Maximizing the number of divs arranged horizontally in HTML while utilizing the full line width

My website consists of several fixed-width div elements that are styled to flow inline using the display type inline-block. This layout creates empty space at the end of the line where subsequent div elements cannot be accommodated and have to wrap to the ...

htmlcss

Element with absolute positioning inside a relative parent does not interfere with other elements outside of the parent

I am currently facing a challenge with a simple dialog that is positioned absolutely in the center of the screen. Inside this dialog, there is a dropdown with a relatively positioned parent (I want the dropdown to follow its parent's position without ...

jquerycss

What methods can be used to identify the specific Router component being rendered in React?

I am currently working with a Navbar component that I want to render with different CSS styles using styled-components based on the route of the component being rendered. How can I determine whether that component is being rendered or not? const NavbarCont ...

cssreactjsreact-routerstyled-components

Can you guide me on where to find the login with Facebook button on this site?

I am currently working on integrating a Facebook authentication system into my app, but I find the default log in button provided by Facebook developers section to be quite unappealing. My Question: I am curious about how websites like Stack Overflow man ...

cssfacebook

jQuery UI Tabs - The initial slide is not being displayed automatically

My default setting for the first tab is .ui-tabs-hide, causing it to be hidden along with all other tabs. Here's my code snippet: <script> $(document).ready(function(){ $("#slide-container").tabs({ fx: { opacity: 'toggle' ...

jqueryhtmlcssjquery-uijquery-ui-tabs

Tips for applying stroke and shadow effects specifically when the mouse is moving over a canvas:

How can we create a shadow and stroke effect for circles drawn using HTML canvas only during mouse hover? I have two circles and would like to add a shadow and stroke effect when the mouse hovers over them. However, the issue is that once the mouse moves ...

javascripthtmlhtml5-canvas

The collapsible menu does not toggle when I tap on the icon

I am currently troubleshooting an issue with this link "https://sampledemos.online/training/index.html" where the toggle feature is not functioning properly. Below are the codes I have written: <aside id="layout-menu" class="layout-menu m ...

htmljquerybootstrap-4

Avoiding ChartJS tooltips from being cut off

I've been exploring how to prevent chartjs from cutting off its tooltips, but I haven't been able to find a config option to address this issue. https://i.sstatic.net/Knzvd.png Here's what I've attempted so far: <script> ...

javascripthtmlcsschart.js

Retrieve data from a website's API endpoint using JSON format and display it on a

I came across a URL that displays [{"outlet_group_id": "29","outlet_group_name": "Parco","outlet_group_code": "0000010"}] and I have the following code snippet <script> $(document).ready(function() { $.getJSON('http://sampl.elinkurl.com/ ...

jqueryhtmljson

"Exploring ways to implement validation for multiple email addresses in a textarea using JQuery or JavaScript, while allowing the addresses to be separated by semicol

NOTE: Each email ID must be unique. An empty string value is allowed to be added. Email IDs should be separated by semicolons and commas. Basic validation of email IDs is necessary for entry. [![ $("#d-notification").focusout(function () { var ...

javascriptjqueryhtmlcss

Is it possible to rotate an image with a random angle when hovering in Angular?

I'm currently working on a photo gallery project and my goal is to have the images rotate when hovered over. However, I am experiencing difficulties in passing values from TypeScript into the CSS. HTML <div class="back"> <div cl ...

javascripthtmlcssangulartypescript

Tips for activating just a single event, whether it's 'change' or 'click'

I am facing an issue with a number input tag that has two event listeners 'on-click' and 'on-change'. Whenever I click on the arrow, both event listeners get triggered. I want only one event to trigger first without removing any of the ...

javascripthtmlvue.jsevent-handling

Calculate the total sum of selected values in a multiple select dropdown using jQuery

Is there a way to calculate the sum of selected items in a multiple selection dropdown menu? For instance, if I select "X12SO" and "X13SO", their values should add up to 30. let total = 0; $("select[name='myselect[]'] option").each(function(){ ...

javascriptjqueryhtml