The issue of missing indent for <ul> <li> arises when a div text is enclosed within another div tag

My webpage has a layout where the content on the right column wraps around the left column. When there is just plain text or paragraphs, everything looks good. However, when the content on the right side includes a list element such as <ul> <li>, the formatting gets messed up.

You can view the fiddle for reference: http://jsfiddle.net/8DB6e/1/

The issue seems to be that the wrapRightCol div container overlaps with the leftcol. Ideally, the wrapRightCol container should stay to the right of leftcol and then wrap around it properly.

Is there anyone who can guide me on correcting the styles so that the list elements are positioned correctly next to the left column with the default indentation (i.e., proper padding and margin)?

Note: I am using the Bootstrap UI library.

Fiddle HTML:

<div class="wrapper">
    <div class="leftcol" >
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum</p>
    </div>
    <div class="wrapRightCol">
        <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</p>
        <h4>Example list</h4>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
        <p>  Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem IpsumLorem Ipsum Lorem IpsumLorem Ipsum</p>                 
    </div>
</div>

Fiddle Style:

.wrapper {
    float: left;
}
.leftcol {
    width: 150px;
    float: left;
    clear: right;
    margin-right: 5px;
    border:1px solid #000;
}
htmlcss

Answer №2

Primary Technique

.wrapRightCol ul{ overflow: hidden; }

Alternative Approach

li{
    list-style-position:inside
}

View Demo1

Explore Demo2

Answer №3

list-style-position:inside aligns the bullets with text in .wrapRightCol, but you can also create space by adjusting the margin-right of .leftCol. A margin-right:1.5em works effectively for this purpose.

From the fiddle provided, it seems unnecessary to use float:left on .wrapper or clear:right on .leftcol.

http://jsfiddle.net/z7pVh/

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

Using jQuery to animate the opacity to 0 and then smoothly fade out the element

I am currently working on a function that animates the opacity of an element to 0 as the user scrolls. However, I am facing an issue where the element is fading out too early instead of waiting for the animation to finish. Here is a link to my jsFiddle sho ...

javascriptjqueryhtmlcss

Is there a way to expand the clickable region of a point in Highcharts so that a click can be registered whenever the point is 'active'?

Forgive me for the slightly convoluted question, but let me provide further clarification. In Highcharts.js, when you move your mouse into the area of a point on a line chart, it hovers over the point and loads the tooltip. I currently have some click eve ...

javascriptjquerycsshighcharts

Incorporate an onclick function into the text tag element

When working with HTML, I often use text tags like this: <text id="aaa" > text</text> I'm curious if it's possible to add an onclick event to this? I attempted the following: var a = document.getElementById('aaa'); a.el ...

javascripthtml

What is the best way to toggle text visibility with a button click and what alternative method can be used if getElement does not work?

After successfully completing the HTML and CSS part, I hit a roadblock with JavaScript. I'm struggling to figure out how to create a button that can toggle the visibility of text when clicked. An error message keeps popping up in the console stating ...

javascripthtmlcssbutton

Ensure that the click event on the HTML element is only triggered one time

In my application, I have the following code snippet. The issue is that this code resides in each table column header. Therefore, whenever I click on a mat-select option, new values are generated and used in an *ngFor loop for mat-option. The problem aris ...

htmlcssangulartypescriptangular-material-5

Transmit data from Raspberry Pi to Apache Server with strong security measures

Utilizing a Raspberry Pi to collect temperature data and store it in a file Running on a virtual machine, the server uses Apache to host a website (comprised of HTML, PHP, and JavaScript) displaying a graph based on this data I am seeking a secure method ...

javascriptphphtmljsonapache

Using a function to invoke Highcharts

I am encountering a problem while trying to invoke a function that includes the code for generating a Highcharts chart. The error message I receive is: TypeError: $(...).highcharts is not a function data: (function() { I have double-checked that hig ...

javascripthtmlhighcharts

Scrape HTML content rendered by Ajax with jQuery

I'm looking to extract data from a webpage and store it on my computer. The issue is that some of the content on the website is generated using ajax technology. So I'm wondering, is it possible to scrape a site with ajax-generated content? ...

jqueryhtmlajax

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" /> ...

jqueryhtmlxml

How to Condense an Element Using Position: Absolute

https://i.sstatic.net/GMUss.png I'm attempting to create functionality where the "Open Chat" button displays an Absolute positioned div, then hides it when clicked again. I experimented with using the react-collapse component, but encountered issues ...

javascripthtmlcssreactjs

Eliminate the mystery overflow in your CSS styling

My website is experiencing overflow on the x axis, even though all vw/width properties are set to 100. I suspect that the .logout element may be causing this issue, but I'm not sure what exactly needs to be modified to resolve it. Any assistance would ...

htmlcss

Is there a method to increase the vertical length of a ::before pseudo-element within a fixed container?

One issue I'm facing is that the ::before selector doesn't extend vertically in a fixed element. Does anyone know of a way to ensure the background fills the entire height? Currently, when a user scrolls, the ::before elemeent stops once the use ...

csssass

Implementing dynamic CSS class addition on CodeIgniter web pages

Exploring the templating mechanism I use in my CodeIgniter application: public function index($page = 'login') { $this->load->view('admin/header',array('page'=>$page)); $this->load->view(&a ...

phpcsscodeigniter-3

Image element for Material UI CardMedia

There is a component in Material UI called CardMedia that allows for media content within a Card. The Mui website showcases an example using the img tag with CardMedia. https://mui.com/material-ui/react-card/#complex-interaction I am interested in using ...

htmlreactjsmaterial-uijsx

Displaying a div based on the response after it is received using an if/else statement

In my form, each question is on a separate page (div), with the ability to show and hide pages. If a user receives a response from the API with a status of "accepted", they are redirected to a URL. I'm currently trying to display a div if their status ...

javascriptjqueryhtmlcssjson

Updating content with jQuery based on radio button selection

Looking for assistance with a simple jQuery code that will display different content when different radio buttons are clicked. Check out the code here. This is the HTML code: <label class="radio inline"> <input id="up_radio" type="radio" n ...

javascriptjqueryhtml

Tips for aligning vertical text perfectly

After spending the entire day researching vertical text, I am still struggling to find a simple solution. I need three items in my header to line up horizontally: an image on the left, a specific-sized box in the center, and another image on the right. Her ...

htmlcssvertical-text

Using the <audio> tag in HTML5 on Android devices

Exploring discussions on Android's support for the <audio> tag has been enlightening. Despite attempts on a Nexus One running Android Froyo 2.2, it seems playing audio remains elusive. As indicated by www.html5test.com, while the tag is support ...

androidhtmlgoogle-chromeaudio

Illustrating a fresh DOM element with intro.js

I am currently utilizing intro.js to create a virtual 'tour' for my website. As I aim to provide a highly interactive experience for users, I have enabled the ability for them to engage with highlighted DOM elements at different points in the tou ...

javascripthtmlintro.js

Enhancing Element Visibility with CSS Centering

HTML <div class="container1"> <ul class="menu-dropdown"> <li>item</li> </ul> <div> CSS .menu-dropdown{ display: none; } .container1:focus .menu-dropdown{ display: block; } I am attempting to cr ...

htmlcssfocus