Words beside the image

For my new project, I am designing a responsive food website where I want to display text next to an image multiple times. Here's how I have attempted to achieve this:

<div class="content">

        <div class="recepie">

      
            <div class="img-recepie">
        
                <img src="../Images/Slide01.jpg" alt="">

            </div>

            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat labore, sint cupiditate distinctio tempora reiciendis.</p>
                               </div>

        </div>


        <div class="recepie">

      
            <div class="img-recepie2">
        
                <img src="../Images/Slide02.jpg" alt="">

            </div>

            <div class="description">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat labore, sint cupiditate distinctio tempora reiciendis.</p>
                             </div>
        </div>
    </div>
htmlcss

Answer №1

When dealing with such scenarios, Flexbox proves to be an effective solution.

Include the below stylesheet:

.menu {
  display: flex;
}

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

The Harp server generates excessive white space within HTML documents

Running a blog on Harp has been smooth sailing, except for one issue that I can't seem to figure out. The project utilizes EJS and the problem lies in the outputted HTML containing excessive whitespace. I've attempted to minimize it, especially w ...

htmlejsremoving-whitespaceharp

The sticky table header is being covered by a disabled HTML button, while the active buttons are not visible

I'm currently working on a website using Bootstrap 5 as my framework. The issue I'm facing is that when scrolling down the page and keeping the table header stuck to the top, the disabled button ends up showing over the header. I attempted to us ...

htmlcssbootstrap-5

How can I transfer a JavaScript value to PHP for storage in an SQL database?

<script> var latitudeVal = document.getElementById("latitude"); var longitudeVal = document.getElementById("longitude"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); ...

javascriptphphtml

Can you identify the language of this HTML include code snippet?

Recently, I came across some .html files that include tags in a different format: [% INCLUDE '/path/to/footer.html' %] This bracket-and-percent-sign tag is unfamiliar to me. Does anyone know what it is used for? ...

htmltemplatestags

CSS: Struggling to Keep Footer at the Bottom of the Page

I've been struggling to get my footer to stick to the bottom of the page, but I just can't seem to make it work. I've searched online for solutions with no success, so I thought I would ask for help here. http://jsfiddle.net/f54eq3w8/ Here ...

css

What are some ways to incorporate navigation controls into my lightbox gallery?

I've recently implemented a lightbox gallery on my website. The left and right arrows have been added to navigate between images in the gallery. However, I am struggling to make the left arrow go to the previous image and the right arrow to the next o ...

javascriptjqueryhtmlcss

The spacing between lines has no impact on the functionality of my app

In my rails app, I have a form structured like the following: <p class='field'> <div class = "form-group"> <div class = "col-sm-3 mobile-label" > <%= form.label :loyalty%> <%=image_tag "qun1.png ...

htmlcssruby-on-rails

A guide on utilizing jQuery to increase the value of an index

When the server returns JSON in this format: "games": [{ "gameType": "RPG", "publishers": [{ "publisher": "Square", "titles": [{ "title": "Final Fantasy", "gameReleases": [ 2006, 2008, 2010, 2012, 2013, 2014 ...

javascriptjqueryhtmljson

Trouble with scrolling horizontally on the website

After completing the coding for this website with bootstrap, I encountered an unexpected issue with a horizontal scroll appearing. This is my first project using bootstrap. I attempted to troubleshoot by using the 'divide et impera' method - rem ...

htmlcsstwitter-bootstraphorizontal-scrolling

Getting the value of a table cell within a row that has a specific value in another cell

Looking to extract the links from a table cell in rows where a specific value is present. This concerns a row in a table where I aim to retrieve the link from the "Match" division if the "Home team" division holds a specific value. There are multiple rows ...

pythonhtmlseleniumweb-scrapingxpath

Adjust the size of the images in the Bootstrap navbar brand to make them resizable and move them

After some online research, I discovered a method to create a two-row Bootstrap navbar with the navbar-brand on its own row: <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBn ...

htmlcssbootstrap-4

The functionality of toggling Jquery with the datepicker is malfunctioning

I am in the process of creating a calendar input field that includes a datepicker for each input box. HTML <select id="select"> <option value="Type">Type</option> <option value="Range">Range</option> <option val ...

phpjqueryhtmldatepicker

Concealing Redundant Users in Entity Framework

I am faced with the task of sorting through a database containing over 4000 objects, many of which are duplicates. My goal is to create a new view that displays only one instance of each element based on the first and last name. I have already implemented ...

javascriptjqueryhtmlentity-framework

The close menu button is not functioning properly when clicked outside the menu - the buttonevent.matches is not recognized as a

I am encountering an issue with the dropdown menu that is not closing when clicking outside of the menu button. Despite having faced this problem before, I can't seem to find a solution now. Any help would be greatly appreciated as I am uncertain why ...

javascripthtmlcssdropdown

Issues arise when attempting to toggle the Angular Bootstrap 4 navbar, along with challenges related to the navbar-dark feature

Whenever I attempt to click the hamburger icon to toggle the navigation on a small screen width, nothing happens. I've tried looking for solutions in previous questions, but I can't seem to find where my error lies. Moreover, when I remove th ...

htmlcssangulartwitter-bootstrapbootstrap-4

The onClick event in HostListener is intermittent in its functionality

While attempting to create a dropdown box in Angular by following these examples, I am encountering inconsistent results. Below is the code I have used: HTML <button (click)="eqLocationDrop()" id="eqLocButton"><i class="fas fa-caret-down">< ...

htmlangulartypescript

CSS, The text is spilling over outside the boundaries of the table cell

I am currently working on a Virtual Machine and unfortunately cannot copy the code. However, I will provide screenshots instead. The problem seems trivial, but I am struggling to solve it. Can someone please offer some suggestions? Here is the table code: ...

htmlcsscss-tablesword-wrapword-break

What strategies can be used to accurately position a rotated image within a rotated div?

Below is the code snippet I am using: <div class="container"> <img class="img"/> <div class="underlay"></div> </div> The image is a picture of some rotated text by 10 degrees, although the ...

htmlcss

Looking to run a JavaScript command without the need for any triggering events?

Is there a way to execute the following JavaScript code without using any event and have it run at the start, onLoad of the page? function calculateDiscount() { var totalPrice = document.getElementsByClassName("Total")[0].innerHTML; var discountedPr ...

javascripthtmlcss

Require JavaScript Array to be Populated PRIOR to (document).ready()

Is there a way to execute some javascript code before the document ready function? Initially, I have this snippet set up... var applicantlist = []; $.getJSON("apps.json", function(appsdata) { for (var i = 0; i<appsdata.applications.length; i++){ ...

javascriptjqueryhtmlajaxarrays