Properly arrange the positioning of floating HTML elements

I am currently using the float property to structure the layout.

<style>
div {
    float: left;
}

.pro {
    width : 100px;
    color : blue;
}
</style>

<span>
<div class="pro">Long property name : </div>
<div>value</div>
</span>

When the "Long property name : " extends onto a new line, I would like the "value" to automatically shift to the next line as well. How can I achieve this with my current HTML code? Thank you. Currently, the "value" remains on the same line as the property name.

Current layout:

Desired layout:

Thank you!

Answer №1

If you want to improve the layout, consider using display: inline-block instead of float like this:

div {
    display: inline-block;
    *display: inline; /*For IE7*/
    *zoom: 1;
}

Take a look at this example: http://jsfiddle.net/thirtydot/wczcC/2/

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 method to calculate the dimensions of flex items without relying on percentages?

Imagine this as the structure of my HTML, with an unspecified number of div elements: <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div>& ...

Guide to highlighting rows in v-data-table with a click in Vuetify (version >= 2.0)

In my email management system, I utilize a v-data-table to organize emails. When a user clicks on a row, a popup displaying the email details appears. Desired Feature: I am looking to have the rows marked as "readed" (either bold or not bold) after th ...

Turn off drag and drop functionality and activate selection in HTML

Recently, I encountered a strange issue where selected text became draggable and droppable onto other text, causing it to concatenate. To resolve this problem, I added the following code: ondragstart="return false" onmousedown="return false" However, thi ...

What is the best way to utilize the isset method in PHP to check for the existence of two different

Having trouble with displaying both data sets in a PHP file? Here's the code snippet: <?php session_start(); include_once'config/connect.php'; //establish database connection if(isset($_POST['add'])) { $add = mysql_query( ...

Obtain the class attribute of a CSS element with whitespaces using PHP's XML/HTML

I'm currently facing an issue with the PHP XML DOM parser. When parsing HTML from the real world, I noticed that many elements have multiple CSS classes due to spaces in the 'class' attribute. However, when using getAttribute() on a DOMNode, ...

The gap between list items(`<li>`s)

Feeling a bit perplexed here. I'm working on creating a page to showcase images. My goal is to have 5 images displayed per row, with maximum spacing when the window is at its widest (~950 px). However, as the window size decreases, I want the images t ...

Exploring the 3D Carousel Effect with jQuery

After creating a 3D carousel using jQuery and CSS3, I am looking to enhance it with swiping support. While there are plenty of libraries available for detecting swipes, I specifically want the carousel to start rotating slowly when the user swipes slowly. ...

How can I apply specific styling to certain cells within a table?

Is there a way to apply styles specifically to certain table headers in an HTML table without altering the HTML or introducing JavaScript? I need to target only 4 out of the total 8 table headers. To see the code and example for this question, visit: http ...

The bootstrap modal form does not allow for user input of information

For the past few days, I've been encountering a strange bug with Bootstrap Modals that I can't seem to find a solution for online. Any help on this matter would be greatly appreciated. The section of my site that is currently giving me trouble i ...

Customizing the style of a dropdown menu in React Material UI using NativeSelect

In our previous projects, we have utilized the NativeSelect components. Now, the task at hand involves altering the appearance of the dropdown Menu within the NativeSelect. If we were to switch to using Select instead, employing the MenuProps property wo ...

How can we improve the resizing of images for smaller screens?

Don't let the title fool you. Check out this code: #headerimg { background: url('http://artotek.fi/css/images/artoteklogo.gif'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; border-bottom: solid ...

Enable vertical scrolling on a container of undetermined height

Can a vertical scroll be implemented on a container with an unknown height using flexbox? The use of max-height is not feasible, as it would limit the height to a specific number that may not work for all screen sizes. Here is a basic example of what is ...

Achieving Bottom or Center Alignment for a Div within Another Div Using Bootstrap 5

I've been struggling to position my Title and CTA Button at the bottom (or center) of the main image div. I'm using Bootstrap 5.1 and have tried various d-flex methods without success. You can view my code on jsfiddle. Thank you in advance for a ...

SleekScroll, SafariAssist, and Adaptive Navigation

I have a few queries regarding this side here Is there a way to implement smooth scrolling? I've experimented with different options, but removing the .slim from jquery breaks the dropdown functionality. How can I resolve this issue? I encounter ...

Implementing onMouseEnter and onMouseLeave functionalities for music player

Currently facing a challenge while developing a music player app. I am trying to implement a feature where: Upon hovering over a song, a "play" button should appear in place of the song number. The currently playing song should display a "pause" ...

What is the best way to position a div below another sticky div when the first div's height is constantly changing

I am facing a challenge with scrollable text and sticky headers on my webpage. The top text has dynamic height based on the content below, which is followed by a sticky header with its own dynamic height. Now, I want to add another sticky header below the ...

Determining outcomes of forms added in real-time

Need assistance with dynamically creating tickets, calculating prices, and displaying results when additional tickets are added. Currently facing an issue where price data is not being calculated when a new ticket is added. Any help would be greatly apprec ...

Enhanced jQuery implementation for hiding elements

I encountered a peculiar issue where jQuery's .is(':hidden') function wrongly returned true for an element that visibly displayed content. You can see the problem demonstrated in this fiddle. The :hidden pseudo checks both offsetWidth and o ...

How can JQuery and CSS brighten up buttons?

Is there a way for me to create an "enlightening" effect similar to the one seen in the "Tags" section on this website? I am not just looking to change the color of the background from gray to white, but instead, I want to progressively make the button li ...

Is it possible to create a list item animation using only one div element?

I'm currently working on achieving a dynamic animation effect for list items similar to the one demonstrated in Pasquale D'Silva's design example: https://medium.com/design-ux/926eb80d64e3#1f47 In this animation, the list item disappears wh ...