What is the best way to position this in a straight line?

Having some trouble aligning this content. I've been experimenting with the code, but nothing seems to work

.image{
    float: left;
    padding-left: 25%;
    padding-top: 20px;
}
.side-menu{
    float: right;
}
div style="display: inline-block;">
    <div class="image">
    <img src="egg.jpg" width="400" height="400">
    </div>
    <div class="side-menu">
        <h1>Ingredients</h1>
        <p>
        2 eggs<br>
        2 tbsp (30 mL) milk (1%)<br>
        Pinch salt<br>
        Pinch pepper</p>
    </div>
</div>

Answer №1

To display two child divs side by side, place them inside a container div and give both child divs the float:left; property.

Check out the code below: CSS

.container {
    height:auto;
    width:auto;
}

.image{
float: left;
padding-left: 25%;
padding-top: 20px;
}
 .side-menu{
float: left;
 }

HTML

<div class="container">
    <div class="image">
        <img src="egg.jpg" width="400" height="400">
    </div>

    <div class="side-menu">
        <h1>Ingredients</h1>
        <p>
        2 eggs<br>
        2 tbsp (30 mL)milk (1%)<br>
        Pinch salt<br>
        Pinch pepper</p>
    </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

Automatically adjusting input box size and position in real-time

I am working on a form that includes a button and an input field. When the user clicks on the button "ADD MORE FIELDS," I want to dynamically generate a new input box. Although I have tried using code from this jsfiddle link and it works, my goal is to ach ...

Expanding beyond the dimensions of the webpage, HTML CSS Height set to 100% creates a unique

I'm struggling with the CSS on a page I'm working on. I have a header and main content each enclosed in div tags, with the header set to a height of 250px and the main content set to a height of 100%. I've also set the html and body heights ...

Can anyone suggest a more efficient method for implementing jQuery toggle?

Summary: I have a customized javascript calendar that offers different viewing options such as day, week, and month. These views display events with specific class names. My current challenge is finding an effective method to toggle the visibility of thes ...

Beside the element, a dropdown navigation menu emerges

Trying to work on a dropdown menu here. It appears to be functioning, but there's a small issue - the dropdown shows up on the right side of the element instead of directly below it. I have a feeling it has to do with either position or padding, but I ...

Hover effect triggered upon mouse exit

As I delve into learning the basics of HTML and CSS, I came across the :hover property in CSS. This unique feature allows for a specific action to occur when the cursor hovers over an element, based on the code provided. Additionally, I discovered the tran ...

`Anomaly detected in image grid display`

The images are not resizing according to the container. Despite setting both height and width to 100%, the image is not taking the width of the outer column container. https://i.sstatic.net/10eMg.jpg This is what I expected This is the result I am current ...

Assistance with CSS: How to Remove a Shape

Is it possible to remove the triangles above the element labels using CSS? To view them, click on a link (hear, see, savor). There is a dotted line and text with a small red triangle/arrow that is not centered. I have managed to disable them for the menus, ...

Submitting a file with Perl CGI

Despite successfully creating my directory, I am facing an issue when trying to place the file within the directory. #!/usr/bin/perl use Cwd; use CGI; my $dir = getcwd(); print "Current Working Directory: $ dir\n"; my $photoDir = "$d ...

Use a div element to occupy the available screen space

I'm curious if it's possible to create a div that fills the remaining space on a webpage. I have a website layout in mind with two main sections - one at the top and one at the bottom. If you have any suggestions on how to achieve this without ...

The form contains an HTML table, but unfortunately, the buttons are not functioning as expected

I have encountered an issue with my form and table setup that I cannot seem to resolve. Despite researching similar problems, I have not been able to find a solution. In the code snippet provided below, you can see that when I click on the buttons for De ...

Challenges with Bootstrap input groups

Despite trying various solutions, nothing seems to be working for me. I attempted using width:200px, but the issue persists. Since my form was quite outdated, I decided to switch to a bootstrap version. However, while others are able to resolve the issue w ...

Error in Cordova Android Compilation ("unable to locate Build Tools version 24.0.1")

I'm currently experiencing some difficulties while trying to compile my Cordova project on Android. Upon entering the command "cordova build Android", I encountered the following error message: FAILURE: Build failed with an exception. * What caused ...

Bootstrap-tour is incompatible with a row within a table structure

Is there a way to highlight a table row effectively? I've been struggling with it and tried using the fix mentioned in this bootstrap-tour issue here Check out this demonstration on jsFiddle: jsFiddle JAVASCRIPT $("#dialog").dialog(); var t = new ...

Conceal the elements of Widget Style by using jQuery to target the ul

My task involves creating a widget style using HTML's ul tag. <div class='tabs' style='width:50%'> <ul> <li id="basic-li"><a href='#basic_information'>Basic</a></li> <li id="mas ...

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 ...

dynamic webpage resizing using html and css

Looking for a way to make my SharePoint window automatically resize when the user changes their browser size. I'm using the web version of SharePoint at work and don't have access to Designer. <style type="text/css"> #dgwrap { HEIGHT: ...

Dynamic Email Design

Currently, I am working on coding an HTML email that needs to be optimized for perfect rendering on all mobile devices. While I have expertise in coding emails for desktop and ensuring compatibility with various email clients and browsers, the challenge no ...

How to efficiently remove duplicate items from multiple select dropdowns in Angular using ng-repeat?

Need help with dynamically assigning objects to select boxes in AngularJS. I have a scenario where I add multiple select boxes to a form, but each box should only display items that haven't been selected in other boxes. How can I achieve this functio ...

Adjusting the top margin of columns in Bootstrap 3 for smaller screens

I am working with a row that has the potential for multiple columns. <div class="container"> <div class="row"> <div class="col-lg-3 col-sm-4 col-xs-6">content</div> <div class="col-lg-3 col-sm ...

How can I show a tooltip when hovering over a tab using uib-tab?

Currently facing an issue with HTML/Bootstrap. My tabs are displayed using the uib-tabset directive on Angular Bootstrap (UI Bootstrap). I am trying to implement a tooltip that appears when hovering over a tab that is disabled. Does anyone know how I can a ...