How can you align a list next to a set of images using HTML and CSS?

When working with these images in my code, I need to create a list alongside them:

<div class="asideContent">
    <ul> 
        <li>  <p> </p> </li> 
        <li>  <p></p> </li>          
        <li>  <p>  </p> </li> 
    </ul>
    <div class = "imageAside">
        <img class=""src=img/Dedede.jpg alt="">
    </div>
    <div class = "imageAside">
        <img class=""src=img/tournament.jpg alt="">
    </div>
    <div class = "imageAside">
        <img class=""src=img/Secret.jpg alt="">   
    </div>

</div>

The main issue I am facing is that the list does not align properly next to the images. Instead of floating it using CSS, I have tried several methods but none seem to work effectively.

htmlcsslist

Answer №1

If you're looking to achieve a responsive layout without relying on the float property, consider using the power of flex and margin-left. This approach can simplify your code and make it more adaptable. Here's an example:

.container {
  display: flex;
}
.asideContent {
 display: flex;
 margin-left: auto;
}

.asideImage {
  margin-left: auto;
}
<div class="container">
  <div class="asideContent">
    <ul> 
        <li>  <p> hey </p> </li> 
        <li>  <p> hey !</p> </li>          
        <li>  <p>  hey 3</p> </li> 
    </ul>
    <div class="asideImage">
        <div class = "imageAside">
          <img class=""src=img/Dedede.jpg alt="">
        </div>
        <div class = "imageAside">
            <img class=""src=img/tournament.jpg alt="">
        </div>
        <div class = "imageAside">
            <img class=""src=img/Secret.jpg alt="">   
        </div>
    </div>
  </div>
</div>

Explore further possibilities with flex and margin properties to enhance the styling of multiple elements in your layout.

Answer №2

One way to achieve this layout is by using the float: left property for images:

.imagesAside {
  float: left;
}
<div class="asideContent">
  <div class="imagesAside">
      <div class = "imageAside">
          <img class=""src=img/Dedede.jpg alt="">
      </div>
      <div class = "imageAside">
          <img class=""src=img/tournament.jpg alt="">
      </div>
      <div class = "imageAside">
          <img class=""src=img/Secret.jpg alt="">   
      </div>
    </div>
    <ul> 
        <li>  <p>h</p>  </li> 
        <li>  <p>h</p>  </li>          
        <li>  <p>h</p>  </li> 
    </ul>
</div>

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

Personalize the menu item in material ui

Currently, I have a <select> component from Material UI and I am iterating over the menuItem elements. Here is a sample you can reference: here My issue lies in trying to change the background color of each menu item. Although I attempted to do so, ...

javascripthtmlcssreactjsmaterial-ui

Image tag src displaying a React icon causes a malfunction

I am currently following a guide on ReactJS and encountered an error when trying to use an Img tag as directed in the tutorial. <Img src={keepLogo} alt="Google keep logo" /> This resulted in the following error: Warning: Invalid value for ...

htmlreactjsreact-icons

Parsing HTML with Qt library isn't able to detect any elements

I am currently working on a web crawling application. Within the code, I have the following snippet: // Normally, the HTML content is retrieved from the web using QNetworkAccessManager & QNetworkReply: // QString htmlCode = this->reply->readAll( ...

c++htmlqthtml-parsing

Locate a row in an unselected data table using Jquery based on the value in a td

Is there an efficient way with jQuery to locate a td in a "legacy" datatable that contains my search value, and then navigate up the row tr? I am currently using $('#modalTable tbody').dataTable()[0].rows to retrieve all rows and then iterate th ...

javascriptjqueryhtmldatatable

Can two BootstrapVue tooltips be displayed on a single element with different target settings?

While working in Vue with BootstrapVue, I encountered a problem where the bottom 2 tooltips that I am using both appear on the button targeted by the click to mask this value button. The tooltip containing the SSN is also only appearing on top of the butto ...

htmltwitter-bootstrapvue.jsbootstrap-vue

What is the best way to pinpoint the origin of the element.style being injected by JavaScript?

I've been tasked with updating a client's WordPress website, but I'm still getting acquainted with the overall structure of the site. When looking at the blog page (), I noticed that posts are displayed within a wrapper labeled #blogleft, a ...

javascripthtmlcssweb-inspector

Is it advisable to use type="text/plain" for JavaScript?

I recently came across instructions on how to implement a particular feature out of curiosity. I found it interesting but was puzzled when they mentioned that in order for it to function properly, certain steps needed to be followed: You must identify any ...

javascripthtml

Show a triangle positioned on the left side of the display

Looking for help with aligning a div to the left side of the screen CSS #nav { position: fixed; height: 50px; width: 50px; display: block; background-color: #000; } This particular div contains an icon that acts as a link HTML <div id="nav"> ...

htmlcss

What could be causing the month to be undefined in this Javascript date?

var currentDate = new Date(); var currentMonth = currentDate.getMonth(); var monthArray = [ 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'S ...

javascripthtmldateundefined

What is the method for utilizing the variable from express in HTML?

Currently, I am working with Express and have the following code: app.get('/', requiresAuth(), (req, res) => res.sendFile('/db_auth_site/index.html', { title: 'Hey', message: 'Hello there!' }) ); I am trying ...

htmlnode.jsexpressnodejs-server

Modify the variable to encompass a multitude of hues - scss

Hello, I am looking to modify the background of a page for dark mode. This is the current background styling: $orangeLight:#FFA500!default; $redLight:#FA8072!default; $blueLight:#B0C4DE!default; $greenLight:#90EE90!default; $list2: $blueLight 0%,$blueLi ...

csssass

Ways to properly link a header according to industry standards

I am faced with a chunk of HTML structured as follows: <div id="header"> <h1>title</h1> <h2>subtitle</h2> </div> To conceal all the text content and substitute it with an image using CSS, I am trying to link th ...

htmlcssstandardsw3c

The unique GopikaTwo Gujarati font is unfortunately not compatible with Android mobile browsers and hybrid applications

I am currently trying to incorporate the custom font GopikaTwo into my hybrid application. Below is the code snippet I have added to my CSS file: @font-face { font-family: 'GopikaTwo' !important; src: url('GopikaTwo.eot') !impo ...

androidcssfont-faceandroid-browsercustom-font

The hidden visibility feature only activates when the mouse is in motion

visibility: hidden doesn't take effect until the mouse is moved. const link = document.getElementById("link"); link.onclick = (event) => { link.style.visibility = "hidden"; link.style.pointerEvents = "none"; event ...

htmlcss

Track how far visitors scroll into the inner content area using Google Tag Manager

Our website features a left-side vertical navigation menu. In order to measure scroll depth, we incorporated Tag Manager code. However, the Tag Manager code triggers on every page load due to us fixing the body scroll and implementing a custom scroll for t ...

htmlgoogle-analyticsgoogle-tag-manager

Email communication not being successfully transmitted

I've been attempting to add a contact form to my website, but unfortunately, it's not functioning as expected. Following this tutorial, I replaced the $myemail variable with my email address and gave it a try. While I do receive the "thank you" m ...

phphtmlformsemail

"Troubangular: Troubleshooting unexpected behavior when trying to update ngFor after setting a property

Dealing with what seems like a straightforward component here. I'm fetching an array of objects from an API, storing them in a property, and then displaying them in a select list for the user to choose from. When the value changes, I filter the result ...

javascripthtmlangular

Moving from CSS to SCSS: Incorporating CSS files from npm packages - A Step-by-Step Guide

I am new to SASS and currently in the process of converting my existing project's CSS files to SCSS. I know that simply changing the extension to .scss will work for my custom files, but I'm not sure how to handle the dependency style files. I ty ...

cssnpmsass

How can I trim a value using one-way data binding in Angular?

Is there a way to trim values in Angular using one-way data binding? Can this be done directly in the component.html file rather than in typescript? I tried the following but it didn't work: <P>{{country.trim()}}</P> Thanks ...

htmlangular

What is the best way to achieve this layout using HTML?

[Beginner in Web Design] I am currently experimenting with creating a layout similar to the one shown here: https://i.sstatic.net/j70FD.png Here is what I have attempted so far: .inner, .outer { position: relative; } .dash { border: 0; borde ...

csshtmltwitter-bootstrapbootstrap-4