The challenges of positioning HTML li elements in a floating layout

Check out my website: . I'm having an issue with the layout where two <li> elements are stacked on top of each other and one is floating next to them, but it's only floating next to the second one. How can I make it float next to the first <li>?

This is what the current CSS looks like:

.sub-info {
    display: inline-block;
    position: relative;
    width: 67%;
    margin-bottom: 25px;
    margin-right: 1%;
    padding-left: 3%;
    float: none;
}
.sub-info2 {
    display: inline-block;
    position: relative;
    width: 26%;
    margin-bottom: 25px;
    float: left;
    padding-left: 1%;
}

I need to figure out how to align all three <li> elements correctly using CSS. Any advice would be greatly appreciated!

Thank you

htmlcss

Answer №1

To achieve the desired layout, wrap your ul in a div and float it next to it. Update the CSS as follows:

.sub-info {
    display: inline;
    position: relative;
    width: 95%;
    margin-bottom: 25px;
    margin-right: 1%;
    padding-left: 3%;
    float: left;
}

Then, within your li.body-section, encapsulate the first two ul's inside a div while keeping the last one outside, like this:

<div class="wrapper">
   <ul></ul>
   <ul></ul>
</div>
<ul></ul>

Add the following CSS:

.wrapper {
   float : left;
}

It should result in a layout similar to the image found here:

Answer №2

The reason for this issue is the ul element containing the right column being set to display: block;.

To resolve this, update the style to display: inline-block; on the ul that contains .sub-info2 and remove the width property from .sub-info2.

Here's an example with inline styling:

<ul style="display: inline-block;">
     <li class="sub-info2" style="width: auto">
          <ul>
               <li class="text tablet">

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 fluid side navigation bar in reactjs

Can someone please help me with the following code issue? I am encountering an error related to the script tag when running it in ReactJS, although it works fine in a simple HTML file. Upon starting npm, an error is displayed pointing to line number which ...

javascriptjqueryhtmlcssreactjs

Utilizing the Material Design card div element, however the elements inside the card are not properly aligned in the center

I'm attempting to include the align="center" attribute to this Material Design Lite card: <main class="mdl-layout__content" align="center"> <div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card"> <div class="mdl-card__title"&g ...

cssmaterial-designhtmlmaterial-design-lite

Is there a feature in JavaScript that allows for the creation of URLs?

I created an index view displaying cards (like playing cards) in a grid using BootStrap. Each card is within its own div element, and I implemented a jQuery click handler for each div to open a details page when clicked. The redirect from the index to the ...

javascriptjqueryhtml

Splitting an array into multiple arrays with distinct names: A step-by-step guide

I have a data set that looks like this: [A,1,0,1,0,1,B,1,0,0,1,A,1]. I want to divide this array into smaller arrays. Each division will occur at the positions where "A" or "B" is found in the original array. The new arrays should be named with the prefix ...

javascripthtmlarrays

Exploring the ancestors of an element

JS <script> $('.btn').click(function(e){ target = e.target; parent = target.parentNode.parentNode; console.log(parent); }); </script> HTML <div class="card" sty ...

javascriptjqueryhtml

Efficiently loading Google Visualizations for core charts by utilizing AJAX within jQueryUI tabs

Loading Google Visualizations via AJAX in jQueryUI tabs After encountering a similar issue, I discovered a solution provided in the link above that partially resolved my problem. I am trying to use Google Visualization core charts within jQueryUI tabs wit ...

jqueryhtmlajaxjquery-uigoogle-visualization

Creating your own browser extension similar to Firebug: A comprehensive guide

As a beginner dotnet developer, I am looking to create an Internet Explorer addon similar to Firebug in Firefox. Specifically, I need the HTML and CSS features of Firebug without all the extras. I'm not sure where to start or which platform to choose. ...

htmlinternet-explorerfirebugadd-onieaddon

Cannot close the Bootstrap dropdown after selecting an option

I am encountering an issue with a dropdown list that has a select feature using Bootstrap 3.4.1. The problem is that the dropdown remains open after selection and does not close unless I click outside of the list. Here is the HTML code: <div id="c ...

javascriptcss

Hide the parent div element if the nested unordered list does not contain any items

I transformed an HTML template into a typo3 template using automaketemplate. Within the HTML code, there is a structure of divs like this <div class="bigPostItWrap">1 <div class="postit">2 <div class="p ...

templateshtmltypo3typoscript

Insert a division into the table following every row

I'm working with a table that can be found here: https://codepen.io/anon/pen/bjvwOx Whenever I click on a row (for example, the 1st row 'NODE ID 1'), I want the div with the id #divTemplate to appear below that particular row, just like it d ...

javascriptjqueryhtmlcss

Browser disregards backslashes in the content of pseudo elements

I have been struggling with a simple issue for quite some time now, and I seem to be out of ideas. The problem lies in the styling of a CSS pseudo-element before, which is defined as follows: #fPhone::before{ color: #78be20; content: "\e622" ...

htmlcsspseudo-element

The hamburger menu icon is not visible

I recently built a website and aimed to ensure it had a responsive design. Following a tutorial on YouTube, I implemented everything exactly as shown in the video. However, I encountered an issue with the hamburger icon not appearing. Can anyone shed som ...

htmlcssresponsive-designhamburger-menu

Determine the number of input files in HTML5 when there is a change

I am working on a project that requires using the HTML5 File API to determine the number of files selected in an input file element and then displaying this count in another element. Here is the HTML code: <div class="form-row"> <label>Ma ...

jqueryhtml

What steps do I need to take in order to transform this code into a MUI component complete with

Having some trouble converting my hero banner code to MUI in a React project. The styling is not coming out correctly. Here is the HTML code: <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120 ...

javascripthtmlcssreactjsmaterial-ui

Ensure that the radio button is set to its default option when the user accesses the page

I have a model with a 'PartActionType' enum which includes Transfer, Harvest, and Dispose options. public enum PartActionType { Transfer, Harvest, Dispose } On my view page, I am displaying these options using ...

c#htmlcssasp.net-mvcrazor

Tips for dynamically updating an HTML value with Javascript

Summary of My Issue: This involves PHP, JS, Smarty, and HTML <form name="todaydeal" method="post"> <span id="fix_addonval"></span> <input type="radio" name="offer" id="offer_{$smarty.section.mem.index+1}" value="{$display_offe ...

phpjavascripthtml

Inconsistent CSS3 transitions behavior in Firefox 4

I have been playing around with some css3 transitions and created a slider test. It works perfectly in webkit browsers, but I have noticed an issue in Firefox 4. When clicking on the left link for the first time, the slider is supposed to slide to the left ...

javascriptjquerycssfirefox4

Refresh all tabs in the TabContainer

I have implemented multiple tabs using dojo on a web page, and I need to refresh the current tab every 5 seconds without refreshing the entire page. You can check out the code in this fiddle: http://jsfiddle.net/5yn2hLv9/4/. Here is an example of the code ...

javascriptjqueryhtmljspdojo

Checking the validity of data before submission can help ensure the accuracy and security of your application

Is there a more effective method for validating input data in real-time as it is being entered into a form? One approach I am considering involves placing a DIV element next to the input field where users can see a message indicating whether their data is ...

phpjqueryhtmlformsinput

Converting the length attribute of a table to a string does not yield any

After grappling with this bug for some time now, I've come up empty-handed in my search for a solution online. Expected Outcome: Upon pressing the create row button, I anticipate a new row being added at the bottom of the table. This row should cons ...

javascripthtmlhtml-table