What is the best way to ensure that the text within Span children is properly laid out to match the width of the parent div tag?

This particular instance involves setting the width of the div tag to 200px and organizing all the span children to occupy the entire width of the parent div tag. If the first row is filled, the span tags should then flow into a second row.

My attempt at achieving this only resulted in all the span tags appearing in a single row:

<html>

<body>

<div width="200px">
<span> text 1 </span> <span> text 2 </span> <span> text 8 </span> <span> text 4 </span><span> text5 </span>
<span> text 6 </span><span> text 7 </span><span> text 9 </span><span> text 10 </span><span> text 11 </span>
<span> text 12 </span><span> text 18 </span> <span> text 14 </span><span> text15 </span>
<span> text 16 </span><span> text 17 </span>

</div>
</body>
</html>

Answer №1

The width attribute is not valid for div elements. To set the width, use CSS or inline styling, like so:

<div style="width: 300px"></div>

Here are some elements that can have the width attribute:

<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>

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

Pressing the button in the navigation bar results in an expansion of the navbar

Can someone help me figure out why my navbar's height is different from the example on this Bootstrap navigation bar snippet? Here's the code I used: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h I copi ...

Retrieve a targeted tag from the API snippet

I need to extract the IMG SRC tag from the given code: <pod title="Scientific name" scanner="Data" id="ScientificName:SpeciesData" position="200" error="false" numsubpods="1"> <subpod title=""> <plaintext>Canis lupus familiaris</plain ...

Obtaining the class value using the getAttribute function

Is there a way to extract and store the value of the class (for example, "AAABC") in a variable? I've attempted various keywords with the getAttribute method, but have had no success. Using terms like "class" returned "gwt-Label", while others yielded ...

I seem to be having an issue with the decimal point on my calculator - I only want to see one dot

Only need one dot for the calculator to function properly. The current situation with multiple dots is causing confusion. I intend to address other aspects of the code later, but I'm currently struggling with this issue. function dec(d) { let ...

Contrast between action="" and action="#" attributes in HTML

There are two ways I've come across for setting a form's action attribute. #1. Using an empty string as the action attribute value: action="" #2. Specifying a hash symbol (#) as the action attribute value: action="#" What distingishes these ...

Div remains fixed while scrolling until the footer is reached

Hi there, I could really use some assistance with a jQuery issue I'm facing. I've been watching tutorials in an attempt to find a solution, but being new to jQuery, I'm struggling. My goal is to scroll a fixed div down the page, however when ...

Alert: The index named "namaunit" is not defined

As a beginner in programming, I am facing an issue where my code is not working for a particular input form. Oddly enough, the same code works perfectly fine for another input form with similar structure. It's puzzling to me why it's not function ...

Trouble with CSS matching pattern - not functioning as expected

I am facing a requirement to customize the colors of ribbon styles instead of using the default ones. After researching pattern matching in CSS, I attempted the following code, but it did not work: This is my original CSS: .ms-cui-cg-**tl** .ms-cui-ct-f ...

Revamp the sequence of divs using jQuery

<div class="example first">111</div> <div class="example second">222</div> <div class="example third">333</div> Can the order of these divs be changed using jQuery? I am looking to get: <div class="example second"&g ...

Is it possible to use D3 for DOM manipulation instead of jQuery?

After experimenting with d3 recently, I noticed some similarities with jquery. Is it feasible to substitute d3 for jquery in terms of general dom management? This isn't a comparison question per se, but I'd appreciate insights on when it might b ...

What is the best way to include start and end labels on Bootstrap's progress bars?

Is there a way to add start and end labels directly below the progress bar in Bootstrap? Here is an example of what I want: [||||||||------------] <Start Label> <End Label> I have been searching for a solution, but it seems ...

Verify the existence of the linked page's href url

Is there an elegant way to verify if a hyperlink on a website directs to a page that returns an HTML 200 code? I'd like to give users the ability to input their own links in a model, but I also want to block any links leading to a 500 or 404 error pag ...

A div positioned to the left is placed beneath another div

I am faced with a design challenge involving two divs. The first div is floated left, while the second div is floated right. In order to achieve a responsive layout, I need the first div to go under the second div when the viewport changes. Both divs conta ...

Ensure that the main div remains centered on the page even when the window size is adjusted

Here is the code snippet: <div id="root"> <div id="child1">xxxx</div> <div id="child2">yyyy</div> </div> CSS : #root{ width: 86%; margin: 0 auto; } #root div { width: 50%; float: left; border: ...

Is there a mistake in the way I am creating a horizontal navigation bar?

Currently working on creating a simple navigation bar using HTML/CSS for a Java/Spring Boot project. Admittedly, my HTML/CSS skills are quite limited as you can see below. I'm aware that there might be some mistakes in my approach. Thank you in advanc ...

Slider - incorporating a heading onto a video with HTML styling

Is there a way to display a title on a slider when one of the slides contains a video? Here is an example code snippet: <!-- Swiper--> <div data-height="100vh" data-min-height="480px" data-slide-effect="fade" class="swiper-container swiper-s ...

JavaScript generating HTML code causing malfunctions

I have been attempting to implement the IN Place Editing feature using JQuery. Below is the code snippet editinplace.js $(document).ready(function() { //When div.edit me is clicked, run this function $("div.editme").click(function() { // ...

Ways to iterate through all elements using xpath

Having recently ventured into the world of xpath and HTML, I realize that I may be overlooking a key concept. In my HTML document, I am aiming to extract all the items listed below (I'm relying on scrapy for my requests; all I need is the correct xpat ...

How to incorporate HTML 5 video into your Angular 2 project using Typescript

How can I programmatically start an HTML video in TypeScript when the user clicks on the video area itself? Below is my HTML code: <div class="video"> <video controls (click)="toggleVideo()" id="videoPlayer"> <source src="{{videoSource ...

Set the datepicker with the window positioned to the right side

In my current project, I am utilizing Angular 13, Bootstrap 5, and ngx-bootstrap-fix-datepicker version 5. "bootstrap": "^5.1.3", "ngx-bootstrap": "^8.0.0", "ngx-bootstrap-fix-datepicker": "^5.6.8" ...