Is it possible to enclose an image with two <div> tags in a single line?

Can anyone help me with this layout issue I am facing? I have two <div>s wrapping an image in the same row, but for some reason, the right <div> keeps dropping below.

I've attempted using float, display:inline-block, and tweaking the styling of the HTMLtags, but none of it seems to be working.

If you could provide any assistance, that would be greatly appreciated. Here's my code:

  <title>Hair by Michelle</title>
<body>
<div class="all">
    <div class="navbar">

        <img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle>

        <h1>Hair By Michelle</h1>

        <ul>
            <li class="home"><a href="#">home</a>
            </li>
            <li class="about"><a href="#">about</a>
            </li>
            <li class="availability"><a href="http://hairbymichelle.simplybook.me/sheduler/manage/">appointments</a>
            </li>
            <li class="contact"><a href="#">contact</a>
            </li>
        </ul>
    </div>
</div>
<div class="container">
    <div class="hours">
            <h1>Hours</h1>

        <p>Tuesday: 12pm-7pm</p>
        </br>
        <p>Wednesday: 12pm-7pm</p>
        </br>
        <p>Thursday: 10am-7pm</p>
        </br>
        <p>Every other Saturday: 10am-7pm</p>
    </div>
    <div class="services">

            <h1>Services</h1>

            <h4>Women's Haircut $32</h4>

        </br>
            <h4>Men's Haircut $22</h4>

        </br>
            <h4>Full head color $50</h4>

        </br>
            <h4>Full highlights $70</h4>

        </br>
            <h4>Color toning $15</h4>

        </br>
            <h4>Facial waxing $12</h4>

    </div>
</div>

If you happen to come across a solution, feel free to send it over. Thank you!

htmlcss

Answer №1

To ensure that elements align in the same line, you should include:

float:left;
position:relative;

For the HTML structure, my suggestion would be to place each image within a separate div: 

.imgrow {
  width:100px;
  height:100px;
  position:relative;
  float:left;
 }
<div class="imgrow"><img class="imgrow" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7"></div>
<div class="imgrow"><img class="imgrow" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7"></div>

Answer №2

In the code provided, there is only one image visible. If you wish for text to appear beside the image, you can use the following code:

<div class="navbar">
<div style="float:left;">
        <img class="pic1" src="https://scontent-lga1-1.xx.fbcdn.net/hphotos-xaf1/v/t1.0-9/598668_4520542180477_68371292_n.jpg?oh=024b6348716dcf01475a40d0576671e7&oe=5640E0C7" alt="Photo of Michelle">
</div>
<div style="float:right;">
        <h1>Hair By Michelle</h1>

        <ul>
            <li class="home"><a href="#">home</a>
        </li>
        <li class="about"><a href="#">about</a>
        </li>
        <li class="availability"><a href="http://hairbymichelle.simplybook.me/sheduler/manage/">appointments</a>
        </li>
        <li class="contact"><a href="#">contact</a>
        </li>
    </ul>
    </div>
</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

How can I use jQuery to set up form validation for an input textfield?

Check out this code snippet: <form data-test="loginForm-container" novalidate="" method="POST" enctype="multipart/form-data"> <div class="css-o5d3v1 e1ovefus2"> <div data-test="guestForm-email-wrapper" class="e1ovefus1 css-yjv4po e1eu3s ...

javascriptjqueryhtml

Instructions on using $.post in jquery to sude uploaded file to a php file for processing

Is there a way to upload photos asynchronously using $.post without relying on .serializeArray()? I want to send a form, containing an upload file, to a PHP processing file. Any suggestions? HTML: <form action="upload1.php" method="post" id="usrform" ...

phpjqueryhtml

Identify the location of the mouse and activate a specific function based

Tracking the x-coordinate of the mouse is crucial in this scenario. When the mouse approaches a specific threshold (250px) towards the left edge of the window, it should trigger the function "openNav." The function should close when the mouse moves away fr ...

javascripthtml

Transferring content from a div class to an input class

I am seeking help to extract text from a div class and transfer it to an input class. Here is the code I have written: import os import time from selenium import webdriver from pyvirtualdisplay import Display from selenium.webdriver.common.by import By fr ...

pythonhtmlseleniumselenium-webdriver

Top way to include an HTML and javascript file in an Ext.Panel within Sencha Touch

My main goal is to efficiently include external HTML files and display them on an Ext.Panel in Sencha touch 2.3 by creating a wrapper module for the HTML file that can be instantiated using xtype, with an external Javascript file for event handling. Updat ...

javascripthtmlextjssencha-touchsencha-touch-2

What is causing me to have difficulty importing any of the images located in the public folder?

I'm currently tackling the NextJS framework, and I'm having trouble importing images that are stored in the public folder. Despite being able to navigate through folders, the images aren't displaying as expected. Here is the import line and ...

htmlreactjsnext.jstailwind-cssreact-fullstack

What happens if I define both the left and right properties for spans?

This is a class for span with the CSS properties position:absolute; top:0px; left:0px; right:0px; .textStyle1 { font-size:24px; font-family:'Arial'; position:absolute; top:0px; left:0px; right:0px; } #div1 { position:absolute; lef ...

htmlcsscss-position

Obtain the outcome of HTML5 FileReader by utilizing promises within an asynchronous function

I am encountering a challenge in my Angular 4 application where I am working with an image. I am trying to pass the base64 string to another variable, but due to the asynchronous nature of this process, the image.src ends up being empty. As a result, the ...

angularhtmltypescriptes6-promisephotoeditorsdk

Guide on creating an HTML5 rectangle for reuse using the Prototypal Pattern

I'm struggling to grasp Prototypal Inheritance through the use of the Prototypal pattern by creating a rectangle object and an instance of that rectangle. It seems like it should be straightforward, but I'm having trouble understanding why the Re ...

javascripthtml

Struggling to find your way around the header on my website? Let me give

I'm looking to display certain links prominently at the top of a page, similar to this example: "home > page1 > link1 > article 1." Can someone advise on how to achieve this using HTML, PHP, or jQuery? ...

javascriptphpjqueryhtml

Creating a centered arrow using CSS within boxes

Here is the CSS class that I have applied to my divs: .rightarrow{ width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #aaaaa9; } This is ...

htmlcss

Centering numerous elements on all screen sizes and devices

Is there a way to align elements in the center of the screen both vertically and horizontally without specifying width and height for mobile and desktop views? How can I make it responsive so that it appears centered on all devices? .parent-container{ ...

htmlcss

What is the best way to limit the length of text in a div if it surpasses a

As I work on a website, users have the ability to add headings to different sections of a page. For example: M11-001 - loss of container and goods from Manchester Some headings can be quite detailed, but in reality, only the first few words are needed to ...

javascriptcssxhtmltexthtml

Issues with div misalignment during jQuery animation

I have successfully created an animation where a child div inside a parent div moves up by -60px when the mouse enters the parent div, and returns to its original position when the mouse leaves. However, I am facing an issue where if the mouse moves direct ...

jqueryhtmlcss

What steps should be taken to validate an HTML5 form without actually submitting it?

I am working on a form that includes various HTML attributes such as: <form> <label>Full Name</label> <input type="text" name="firstname" class="span3" required="required"> <label>Email Address</label&g ...

jqueryhtml

Using Radio button to access local HTML pages - A step-by-step guide

I am currently working on a project that involves the use of radio buttons and their corresponding options. My goal is to have each radio button selection lead to a specific HTML page being displayed. I've come across solutions involving external URLs ...

javascriptphpjqueryhtml

Guide to removing selected value from a combobox in Angular

I am working on a simple HTML file that consists of one combobox and one clear button. I want the clear button to remove the selected value from the combobox when clicked. Below is my code: mat-card-content fxLayout="row wrap" fxLayoutAlign="left" fxLayou ...

javascripthtmlangulartypescript

Personalized designing of each letter

Is there a way to style numbers without using something like <span></span>? I'm looking for a clean way to do this for each sign. Attached is an example showing a "flip clock" effect that I would like to achieve. I have come across plugi ...

htmlcss

What steps should be taken to create a two-column table from a given list of items?

I am trying to display a list of words in two columns, one word after another from left to right. Here is the desired table structure: <table id="wordTable"> <tr> <td>ac </td> <td>bd </td> </tr> ...

javascripthtml

The execution of jQuery code from PHP using $.ajax is not functioning properly

I am attempting to run a jQuery code from a PHP page using AJAX. Modify the HTML of div.error Here is the code (Let me know if there is a simpler method): - no $.load HTML/jQuery: jquery.js already loaded <input type='text' id='test&a ...

phpjqueryhtml