The inclusion of float: left disrupts the formatting of the list

My webpage features a visual element known as a "plan", which consists of a small table and an image. I want these two elements to appear side by side without any styling. Currently, they are displayed one below the other. You can view how it looks like here: http://jsfiddle.net/DCTwd/1/

I attempted to use the CSS property float: left on both the table and the image within a list item (li), but this did not produce the desired result. I am now wondering if it is not possible to use float: left inside a li. If that is the case, I would appreciate any guidance on how to achieve the layout I am aiming for.

htmlcsscss-float

Answer №1

To implement a solution, I suggest using the inline-table property which has good support in CSS2.1:

table {
    display: inline-table;
}

I have created a sample demonstration here: http://jsfiddle.net/audetwebdesign/cYDUC/

It is important to consider the padding and margin around your ul and li elements, and optionally hide the bullet on the left side.

If compatibility with IE7 is necessary, you can utilize display: inline and adjust the padding and margin settings accordingly for the elements.

Answer №2

Forget about using the outdated float:left; style, embrace display:inline-block; as your new best friend!

Check out your updated jsFiddle. This example is simple, but for your actual CSS, consider using class-based styles rather than element-based ones.

Take note of the fallback properties like zoom:1; *display:inline; for IE7 and below, and use vertical-align:middle; for better aesthetics. You can also experiment with using top or bottom, depending on your preference.

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 could be causing the issue with my Date and Time input not functioning correctly?

I developed a React frontend application styled with Material UI design. The issue I am facing is that after adding the Date and Time component styling to the form, it is unable to process the "name" value for posting. Specifically, the error message "Ty ...

cssreactjsmaterial-ui

After refreshing the page, users are redirected back to the login page

On my website, I created a main page and an index.html page that redirects to the main page through a login panel. The issue I am encountering is that when I log in successfully on the main page and then refresh the page, it takes me back to the login pag ...

javascriptjqueryhtmlcss

What could be causing the issue with the 100% height and 100% width not functioning properly on my ASPX page?

The CSS and HTML code work perfectly in an isolated test environment: body, html { height: 100%; min-height:600px; min-width:800px; overflow:hidden; margin:0;padding:0; } html {overflow:auto;} .fill {height:100%; width:100%; backgro ...

htmlcssasp.net

Access a webpage whose URL has been dynamically assigned using JavaScript

I have a website that consists of a single page and features four tabs. Whenever a tab is clicked, it displays the corresponding content in a div while hiding the other three divs along with their respective content. To ensure a smooth user experience, I u ...

javascripthtmlurl

Generating a PDF from a CSS3 multi-column layout with the help of snappy (a wrapper for wkhtmltopdf)

I am attempting to create a PDF with three columns using barryvdh/laravel-snappy and wkhtmltopdf. Since the text that will populate these columns varies in length, I need a method that allows the text to flow freely within the columns. I have attempted to ...

phpcsswkhtmltopdf

CSS3 Icon: the content being placed is not consistently positioned

I'm utilizing CSS3 to create icons, and everything was going smoothly until I encountered an issue with a simple design. My goal is to have an exclamation mark centered inside a circle, but its position appears inconsistent. At times, it seems slightl ...

htmlcssinserticons

Equal-height columns in a responsive grid system

I'm currently facing an issue with a layout that seems simple I am working on a design featuring 4 headline boxes. In the "desktop" view, all 4 boxes need to be of equal height. The same applies when viewed across 2 boxes in the "tablet" mode. Howeve ...

cssresponsive-designgrid-layout

Arranging Fancybox images into categories

I am currently experimenting with the fancybox function. It seems to be working fine, but for some reason it is not grouping up based on my Rel attribute. Below is the JavaScript code: <script type="text/javascript"> $(function($){ var ...

jqueryhtmlfancybox

Automatically load file and play audio when the page is loaded

I have created code that allows me to input an mp3 file, output the audio, and display a visual representation of the music. Currently, loading the file is done manually through an input type="file". Now, I want to change it so that the music automaticall ...

javascripthtml

Unable to align span vertically using font-style "Luckiest Guy" in CSS

I have encountered an issue with vertically centering a span using the font-style "Luckiest Guy". https://i.sstatic.net/Lz8o3.png I attempted to use display: flex;align-items: center; on the span, but it did not work. App.vue <template> <div ...

javascripthtmlcssvue.jsflexbox

Organize AngularJS ng-repeat using dictionary information

I'm dealing with a dictionary consisting of key-value pairs, which looks something like this: data = { "key1": 1000, "key2": 2000, "key3": 500 } My goal is to display this data in a table using AngularJS. One way I can achieve this is b ...

javascripthtmlangularjs

What is the best method for using CSS/HTML to showcase text at a height of 2mm consistently across various devices with varying screen resolutions and dimensions?

Designing a basic webpage to showcase the text "Hello, World!": <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta charset="utf-8"> </head> <body> <p>Hello, Wor ...

htmlcss

Is it possible to send a message from a child iframe to its parent using HTML5 cross-browser compatibility

I've been following this tutorial on a video-sharing website, which demonstrates how to securely pass messages between an iframe and its parent. The tutorial can be found at a specific URL. To achieve this functionality, you would end up with a simila ...

javascripthtml

What is the most effective method for transferring data to a concealed input field?

I currently have a webpage with dual forms - one on the main page and another within a Bootstrap modal. The primary form includes fields like "Neck, Chest, Waist," while the modal's form only has an email field. To streamline the submission process, ...

javascriptjqueryhtmlinputhidden-field

Just sent out an email including an attachment with HTML content or a webpage link to access on Google

My email recipients primarily use Gmail as their email service provider. To address this, I saved the contents of this page as an HTML file named index.html and stored it on my drive for easy sending. However, the issue lies in the fact that the page does ...

htmlemailgoogle-apps-scriptgoogle-sheetsgoogle-drive-api

How can I alter the div once the form has been submitted?

Is there a way to change the background of a form and its results after submitting the form? I need to switch the image background to a plain color. I attempted to use a solution I found, but it doesn't seem to be working as expected. You can view my ...

javascriptjqueryhtmlcssforms

Creating a Burger Navigation Menu with CSS and HTML using Image Overlapping

I'm encountering an issue with the new website I created for my local Church. I followed a tutorial on building a burger menu using just HTML and CSS, which you can view here. The problem arises when I attempt to place an image below the navigation m ...

htmlcss

JavaScript - Attempting to insert a value into a text field by clicking a button

I am struggling to get my function to properly add the value of the button to the text field when clicked by the user. HTML <form name="testing" action="test.php" method="get">Chords: <textarea name="field"& ...

javascripthtml

Boost the figures in an HTML input without affecting the letters

Dealing with a challenge where I need an input field to accept both numbers and letters, but only allow the numbers to be increased or decreased while keeping the letters intact. Essentially, users should not be able to delete the letters. The desired func ...

htmlcssinputletter

The expected response from CSS3 animated images may not be fully realized

I've been working on this project with 4 images. While hovering over one image causes the others to change size as intended, I can't figure out why the ones on the left are not following the same pattern even though I have specified that they sho ...

htmlcsshovertransformscale