Ways to position divs within a <li> element while maintaining vertical stacking of the <li> entries?

Question

Ways to position divs within a <li> element while maintaining vertical stacking of the <li> entries?

I have an unordered list where each list item will contain 2 divs. I want the divs to float next to each other, while still having the list items stack vertically. The issue is that all my divs are floating instead of each list item going beneath the previous one. What style changes do I need to make here?

Thanks!

// Add the message to the page.
$('#conversation').append('<li><div class="chat-container"><div class="' + cssStyle + '"></div><div class="chat-text"><strong>' + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</div><div></li>');

My Styles:

#conversation >li > div > div {
    float: left;
}
.legend {
    font-size: 20px;
}
.chat-text {
    padding-left: 20px;
}

With the answer I now achieve the desired result.

javascript html css html-lists

Answer 1

Answer №1

You seem to be experiencing a clearfix issue.

To address this problem, consider adding the following style to your code. It may be necessary to define this as a CSS class to prevent it from affecting all li elements:

li{
    overflow: auto;
}

View a functional example here: http://jsfiddle.net/6J8SU/

To implement the class, modify your script like this:

$('#conversation').append('<li class="row"><div class="chat-container"><div class="' + cssStyle + '"></div><div class="chat-text"><strong>'
            + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</div><div></li>');

Don't forget to include the following styling as well:

.row{
    overflow: auto;
}

Example with the added Class: http://jsfiddle.net/6J8SU/1/

Answer 2

You seem to be experiencing a clearfix issue.

To address this problem, consider adding the following style to your code. It may be necessary to define this as a CSS class to prevent it from affecting all li elements:

li{
    overflow: auto;
}

View a functional example here: http://jsfiddle.net/6J8SU/

To implement the class, modify your script like this:

$('#conversation').append('<li class="row"><div class="chat-container"><div class="' + cssStyle + '"></div><div class="chat-text"><strong>'
            + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</div><div></li>');

Don't forget to include the following styling as well:

.row{
    overflow: auto;
}

Example with the added Class: http://jsfiddle.net/6J8SU/1/

Ways to position divs within a <li> element while maintaining vertical stacking of the <li> entries?

Answer №1

Similar questions

Create a DIV element that completely fills the vertical space available

The Google Javascript API Photo getURL function provides a temporary URL that may not always lead to the correct photo_reference

I'm having trouble locating the container with only one child element in JavaScript

Send data from JavaScript variables to PHP script

I am having trouble getting my tag to function properly within the if statement of my template

As you scroll, the header gradually reduces in size, but at the point where the reduction occurs, a slight flick

Script to Trigger Download Button

Issues with React router arise once the app has been built

"JavaScript throws an 'Undefined' error when trying to access a basic

Include a selection of images within a popover box

In the case of a PDF being in landscape orientation, the full width of the document is not utilized despite the width being set to

Verifying the absence of values in destructured variables

Encountered an error while using vue-tiny-slider: Uncaught TypeError in promise - t2 is not recognized as a function

What is the best way to test for errors thrown by async functions using chai or chai-as-promised?

What is the best way to retrieve the root binding node from a viewmodel in order to apply jQuery.blockUI when performing an AJAX post request?

Selecting a pair of radio buttons to toggle the visibility of different div elements using JavaScript

Alert classes are not included in bootstrap 5 npm package

Step-by-step guide to showing a div upon clicking an element using jQuery

Attempting to send an array of files to a Meteor function

JavaScript - An Efficient Method to Retrieve Data Imported from the Controller via Ajax