css subcategories - divs failing to meet css criteria

I am encountering an issue where my subclass is not working on DIV elements.

While the CSS rules are able to match inline tags like span and a, they do not seem to work with div.

Please refer to the example provided below:

<style>

.row {
    display: block;
}

.row .lbl {
    float: left;
    width: 200px;
    text-align: right;
    font-weight: bold;
    background-color: blue;
}

.row .inpt {
    float: left;
    width: 200px;
    text-align: right;
    font-weight: bold;
    background-color: red;
}


</style>

The following code snippet WORKS!!!

<p class="row">

    <span class="lbl">Title</span>
    <span class="inpt">Data</span> 

</p>

However, the one below DOES NOT WORK!!!

<p class="row">

    <div class="lbl">Title</div>
    <div class="inpt">Data</div> 

</p>

Answer №1

According to w3.org, the P element can only contain inline elements as specified below:

<!ELEMENT P - O (%inline;)*            -- paragraph -->

This rule aligns with http://www.w3.org/TR/html401/struct/text.html#h-9.3.1, which states that the P element "cannot contain block-level elements (including P itself)."

Answer №2

My theory is that the reason it works when you switch your p to a div is because your div is now a sibling of the original p.

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

Creating a dynamic grid design with images using the <ul><li></li></ul> HTML tags

Trying to create a responsive grid of images that adapts to changes in browser size. Is there a way to achieve this using a list? Ideally, I want the images to be evenly spaced in rows. For example, if there are three rows of four images on top and one r ...

XML powered jQuery menu

Admittedly, I have not yet used XML with jQuery. Below is a snippet of the XML: <folder title="Home"> <item title="Welcome" /> <folder title="My Photos"> <folder title="Holiday"> <item title="Photo 1" /> ...

Div over which scroll editing is performed

I want to develop a website where my title div remains fixed in one position as I scroll down. However, the issue arises when I set it to be fixed because my navigation button on the left disappears and I'm unsure how to keep it in place. // JavaSc ...

One way to enhance Razor helpers is by integrating parameters into them

Is there a way to create an HTML Helper similar to @Html.TextBoxFor(model => model.signature) that includes a data-id parameter in the generated input, like shown below? <input type="text" name="signature" data-id="No Signature" /> I understand ...

Adjust color in real-time with JavaScript

I am using a json file to store data for generating a diagram, and I want to change the color of the diagram conditionally based on an attribute in the json. If the attribute is false, the color should be red, and if true, it should be green. Here is a sni ...

jQuery - Modify Turn.js to exclusively implement the page Peel effect

I am attempting to implement the peel effect from turn.js into my code, where hovering over the bottom right corner of the page causes it to peel slightly and appear as if it is bending upwards. I specifically want only the peel effect and not the entire ...

Ways to change columns into rows with CSS

Hey there! I'm looking for a way to convert columns into rows and vice versa. In my table, I have both column headers and row headers on the left side. The row headers are simply bold text placed next to each row to describe its content. I want to op ...

Utilizing HTML, CSS, and JavaScript to dynamically add and remove a class from

I've been struggling with a specific issue in my 9-button grid. When I click on a button and it changes color to orange, if I click on another button, both buttons remain orange. What I want is for only one button at a time to be orange - when a new b ...

Preserve HTML element states upon refreshing the page

On my webpage, I have draggable and resizable DIVs that I want to save the state of so they remain the same after a page refresh. This functionality is seen in features like Facebook chat where open windows remain open even after refreshing the page. Can ...

Automatically conceal a div once an iframe reaches a specific height

When a user schedules an appointment on our website, it triggers a change in the height of an iframe. I want to automatically hide the section above the iframe once the iframe's height has changed. Currently, I have implemented the following code whic ...

Modify an HTML document using a PHP script

I am creating a website that automatically generates an HTML template with some customizable text through a form. However, I want the ability to retrieve that text in the form after pressing a button or taking some action, so it can be edited. I've ...

What is an alternative method to interact with elements in Selenium besides using Driver.get?

I am currently working on a code to automate joining a google meet. The process involves signing into my google account, which is successful until I reach the "Verify that it's you" stage (image 1). When I attempt to use driver.get, it redirects me ba ...

Refreshing the page after executing a MySQL UPDATE statement

There seems to be a problem with the page refreshing faster than the query execution. I have an UPDATE query to update my database with values in my fields, triggered by pushing a button. However, upon clicking the button (which refreshes the website), th ...

Using JavaScript to add a class when hovering over an element

I am trying to customize the ul inside one of my li elements in the nav by adding a class when hovered. However, I am encountering an issue where the menu disappears when I try to click on it after hovering over it. I want to achieve this functionality usi ...

Why does the DropDownList consistently remove the initial value?

I am currently in the process of developing a recipe website focused on meals. I have created an admin panel where I can manage the meals added to the site. One issue I am facing is with deleting a meal that was previously added. The menu displays the numb ...

Issue with slide animation in carousel on Bootstrap version 4.5.2 not functioning as intended

Recently, I've been diving into learning Bootstrap (v4.5.2) and decided to implement a basic carousel on my website that slides automatically. Following the documentation on Bootstrap's website, I copied the example code for a simple carousel wit ...

Having trouble with Python Bottle <br /> not functioning properly?

I encountered a perplexing issue and I am unsure of how to resolve it: There is a text area where users can input their text. For example, let's say the following is entered : This is the user's text After storing this in my database and ret ...

Ways to expand the div to fit the width of the text after it has been wrapped

I need a continuous underline to stretch across the remaining width after the text wraps in a table cell. Here is the desired effect: https://i.sstatic.net/XNNyj.png If the text wrapping changes, the underline width should adjust accordingly. This is w ...

Tips for creating a hover effect on a rounded outline button with a gradient border

What I am looking for: I want the buttons to have rounded corners; The buttons should use linear-gradient, with button A as the border and button B as the background color; When hovering over the buttons, the opacity should change to 0.5. This works fine ...

Using React Material UI to implement a button function that triggers a file picker window

I have a customized Material UI button component that I want to use for selecting files from my computer upon clicking. However, my attempt to achieve this by nesting the <Button></Button> within a <label> associated with an <input typ ...