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

Personalizing MaterialUI's autocomplete functionality

Trying to implement the material-UI Autocomplete component in my react app and looking for a way to display a div when hovering over an option from the list, similar to what is shown in this reference image. View example If anyone has any tips or suggest ...

javascripthtmlcssreactjsmaterial-ui

Arranging buttons that are generated dynamically in a vertical alignment

Currently, I am in the process of creating a webpage for various items, and everything is going well so far. However, I have encountered an issue while attempting to vertically align the buttons that I am generating using JavaScript within the document. I ...

javascriptjqueryhtmlcss

The `div` element automatically starts on a new line rather than expanding vertically

Check out my code here: http://jsfiddle.net/sfhs6ra1/ I'm facing an issue where I want the title of post #2 to be aligned next to the thumbnail image, taking up more vertical space instead of moving to a new line. Any suggestions on how I can achiev ...

htmlcss

Tips for aligning a row with both text and input fields in the center

I'm working on a design that includes text and input fields in rows, and I want everything to be centered. Should I wrap all the content in a div and center it as a whole, or should I center each row individually? Any suggestions? Here is the code sn ...

htmlcss

Make the <textarea> occupy the entire available space

How can I make a <textarea> occupy all available space within a <td> element? Upon clicking inside the table cell, the <textarea> should display with precisely the same dimensions as the cell itself, resembling an Excel spreadsheet. I h ...

htmlcss

Tips on positioning only one list item on your Bootstrap navbar to the right

I am currently learning to code with HTML and am attempting to create a navigation bar with some list items on the right side and some on the left. Although I'm using Bootstrap, I am unable to figure out how to move only the 'contact' item t ...

htmlcssbootstrap-5

Employing the "div" element to target in CSS styling

I'm dealing with a document structure that is consistent across multiple pages. HTML: <ul> <li> <div> <img src="" /> </div> </li> </ul> Presently, there is a border aroun ...

htmlcss

Post your artwork on Facebook's timeline

I am working on a website that allows users to create custom smartphone cases. One feature I want to implement is the ability for users to share their design on Facebook, including the actual design itself. I have the object and the canvas with the 's ...

javascriptfacebookhtmlcanvas

Create dynamic animations for HTML lists with seamless transitions

I am looking to create a smooth animation effect for an HTML list that moves from left to right and vice versa with a fixed length. The issue I am encountering is that when I click on the right button, it is replacing the list elements instead of animating ...

jqueryhtmlcsshtml-lists

Establishing the Default Volume within a script

I'm looking to adjust the default volume of music on my website. Currently, it plays too loudly on load, but I have a slider bar that allows users to change the volume. How can I set the default volume to be 25% of the slider? CHECK OUT MY WEBSITE! ...

javascripthtml

Guide to resolving the issue of "Links lacking a clear name" in Lighthouse

Lighthouse is recommending that I address my a href text Here is the HTML code snippet in question: <a href="https://twitter.com/@some-name-here" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a> The issue is that I a ...

htmlcsslighthouse

Leveraging the power of HTML 5 to dynamically insert content into a jQuery table

I am experiencing an issue with my jquery stock ticker. It displays the latest stocks including Company Name, stock price, and percentage changed. The stock price can be in GBP, USD, or YEN, but the current ticker does not indicate the currency. I attemp ...

javascriptjqueryhtml

What is the process for integrating this graph using highcharts?

Check out this link for more information on investment decision-making. There is a visually appealing graph and pie chart featured in the section about Investment Decision-Making in 2016. After noticing that it was created using Highcharts, I wanted to c ...

javascripthtmlcsshighchartsfrontend

Ways to modify the text of an HTML element when hovering over it

One of my elements contains the text &times; within a <span>. Is there a way to change this symbol to something else, like &infin;, when hovered over? <span class="change-text">&times;</span> When the mouse hovers over it, I ...

javascripthtmlcss

Is it detrimental to my search engine ranking if I utilize CSS display:none?

Imagine having valuable content that is initially hidden with CSS, and then using javascript to reveal it only when the user clicks on certain links. Even users without javascript enabled can access this content by following the links to a new page where i ...

javascriptcssseo

Generate gzipped files using Angular CLI

I am attempting to populate a dist folder with the standard files along with their .gz versions. To achieve this, I used ng eject to obtain the webpack.config.js file in order to integrate the compression plugin from https://github.com/webpack-contrib/comp ...

cssangularwebpackangular-cli

Stop vertical scrolling in a designated div container

I am dealing with a div that is overflowing, but the horizontal scroll bar is not visible. How can I prevent actual scrolling on the div when the user attempts to scroll using the mouse or arrow keys? Below is the code for this div and a snapshot <!- ...

htmlcss

Bootstrap for Twitter: How to Customize Text in the Navigation Bar

As per the twitter bootstrap guidelines, I am supposed to enclose text in a <p> tag for correct leading and color. However, when I try to do this within the navbar element or any of its sub-levels, the text does not inherit any of the styling propert ...

htmlcsstwitter-bootstrap

The drop-down links vanish into the depths of the webpage's body

Can someone assist with my drop-down menu issue for the link "services"? The link disappears behind the page content when I try to modify it. Any help would be appreciated, thank you! This is the CSS: .bodycontent { margin: 0 25% 0 25%; ...

htmlcssdrop-down-menumenuhyperlink

Enabling draggable behavior for div elements on Mozilla Firefox

I've attempted the code mentioned in this forum but unfortunately, it's not working for me. I am currently using Firefox 15 and it seems to work fine in Chrome. Below is my code : <!DOCTYPE html> <head> <title>A Simple Dragg ...

javascripthtml