What is the most effective method for arranging a block of text on the left side with an image on the right?

I am looking to design a container with text on one side and an image on the other. The div should be around 300px in height. I've been experimenting with different approaches but would like to adhere to standard practices for this layout. Your help is appreciated.

HTML

<div id="early">
    <h3> Napoleon's Origins </h3>
    <br>
    <br>
    <p>Napoleon Bonaparte was born in his family's ancestral home on August 15, 1769.</p>   
</div>

CSS

#early {
    margin-right: 250px;
    height: 250px;
    background: url(../images/Napoleon_23yrs.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 160px 225px;
    line-height: 3px;
}
cssimagetext

Answer №1

To align an image to the right of text, create a div and add display:inline-block to the paragraph tag.

Check out the demo here

HTML:

<div class="content">
<p>Napoleon Bonaparte was born in his family's ancestral home on August 15, 1769.</p>
<img src="DD1_mini.jpg"></img>

CSS:

.content {height:300px; width:auto; }
.content p {display:inline-block; vertical-align:top;}

Answer №2

When you add 3 and 4, you get 7. When you add 5 and 2, you also get 7. It all depends on how simply you implement things. I personally always use this method: 

<p>Lorem ipsum <img src="image.jpg" class="right"></p>

This is the CSS code for it: 

.right { display: inline-block; float: right }

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

What could be causing the lack of functionality for my button click in my JavaScript and HTML setup?

Currently, I am attempting to implement a functionality where I have two buttons at the top of my page. One button displays "French" by default, and when I click on the "English" button, it should replace the text with "French" using show and hide methods. ...

javascripthtmlcssbuttonhtml-table

Is there a way to display two cards side by side in mobile view?

On a desktop view, 2 cards are displayed in a row. I would like them to also appear in a row on mobile view. I tried using col-sm-4 but it's not working. How can I get the cards to display in a row on mobile view so that I can see both the product pho ...

htmlcssbootstrap-4

Center the image and align the floated texts on each side horizontally

I've recently started learning about HTML and CSS, but I'm having trouble grasping one concept. My goal is to align two floating <p> elements on either side of a centered <img>. Here's an example of what I'm trying to achiev ...

htmlcss

Is it possible to make a div jump or bounce if it has a flex display?

I'm looking to add some interactive animation to an image inside a div when my mouse hovers over it. To better explain the issue I'm facing, I created a quick representation of what I want to achieve in the code below. My goal is to have the te ...

javascriptjqueryhtmlcssflexbox

Can I use jQuery to disable all elements within a div, including anchor and paragraph tags?

Can anyone offer assistance with HTML and CSS? I am trying to disable all content inside a div that has the class "main-wrapper" when a user clicks on a logout button using a jQuery function. I have attempted two methods, but so far without success! funct ...

jqueryhtmlcssjquery-ui

Struggling with a filtering and sorting problem in my code, looking for some assistance

I'm encountering an issue with an isotope filter menu. The goal is for it to load data based on a timestamp and allow filtering. However, there seems to be a conflict between my sortBy script and the filter script. Below is the code in question: Sor ...

jqueryhtmlcssjquery-isotope

What is the method for positioning the cursor at the beginning of a center-aligned placeholder within a contenteditable element?

Here is the code snippet I am working with: HTML: <div class="title" contenteditable="true" placeholder="Title"></div> CSS: .title { width: 500px; margin: 0 auto; text-align: center; } [contenteditable=true]:empty:before{ conte ...

javascriptjqueryhtmlcssplaceholder

Deactivate Link Using CSS while Allowing Title to be Functional

Is there a way to enable the link in CSS while still showing the title? Take a look at my code: CSS and HTML Code: .disabledLink { pointer-events: none; opacity: 0.6; cursor: default; } <a href="www.google.com" class="disableLink" title="M ...

htmlcss

Shift a div towards the right edge of the navigation bar

**I am looking to reposition the Navbar_icon div to be on the right side of the navbar. The Navbar_icon contains icons for search, help, and sign in. ** Current layout of the navbar is shown in the image below: <https://i.sstatic.net/GGvBa.png> REA ...

htmlcssreactjs

Leveraging ng-click and ng-hide/show directives within ng-repeat in Angular

I have a simple Single Page Website built with Angular. I utilized ng-repeat to generate content on the main page, where each item is an image. I am looking to create an alternate view for each image to display more details. I have implemented this feature ...

javascripthtmlcssangularjs

Maximize margin usage by extending to full width

Check out this JS Fiddle example Is there a way to align these boxes in the example so they are the same size and positioned next to each other on one line? Additionally, how can we ensure that if the window is resized and one box drops down, it will be c ...

htmlcsslist

A step-by-step guide to customizing MUI CSS within a React component that incorporates MUI elements

Here is a custom Reactjs component I created and used in various components: function CustomSearchBox({ handle, placeholder, inputType, ...props}) { return ( <Box sx={{ display: 'flex', ali ...

htmlcssreactjsmaterial-ui

What is the best way to expand the navigation bar: should I add a side div or incorporate a background image?

I am encountering two issues that I need help solving. My first problem involves stretching out the navigation bar to fill the height and length of the adjacent div (div#textarea) while also keeping the text of the menu centered within that div. The seco ...

htmlcss

I'm having trouble aligning my <div> element in the center and I'm not sure what the issue could be

I'm attempting to center the image. It seems like it should be a simple fix, but I've experimented with multiple solutions and even started from scratch three times. #main_image { background-color: bisque; position: fixed; display: block; ...

htmlcss

tips for detecting duplicate images in an array using iOS

Currently, I am working on an app called Duplicate Image Finder for IOS. My main query pertains to comparing an array of images in order to identify duplicates within this array. Is there a recommended approach for achieving this task? I have attempted a ...

iosarraysimageduplicates

Seeking Assistance with Customizing HTML Uniform Panels

Looking at the HTML provided, I have two requirements: Request: I need to center the green boxes regardless of their height, without having to adjust the top:-10px/bottom:-10px values when the height changes. Eliminate the fixed top/bottom value (as the ...

htmlcss

Designing a collection of inline divs that automatically stretch to fit the parent container, while also wrapping to a new line if the minimum width is reached

Welcome to my first post on this platform! I love a good HTML challenge, but I'm stumped on this particular issue and could really use some help. Thank you in advance to anyone who can assist. What I am trying to achieve is to create a series of inl ...

htmlcssflexbox

Retrieve a particular HTML element from an object that has been mapped

After reproducing my issue on a smaller scale for easier handling, I am now aiming to implement an onclick function that reveals the hidden content inside each column. The plan is to initially hide the content using display: none and then switch it to disp ...

javascripthtmlcssreactjs

Experiencing difficulty adjusting the width of a Tumblr post with JavaScript or jQuery?

Calling all coding experts! I've been working on customizing a Tumblr theme, and everything is looking good except for one issue. I'm struggling to adjust the width of photos on a permalink (post) page. Check out this link: You'll notice t ...

javascriptjqueryhtmlcss

Tips for keeping the header text in place when navigating the navbar breadcrumb on mobile devices

When viewing the site on a mobile device, clicking on the breadcrumb causes the header text and button to shift down, extending beyond the header image. Is there a way to keep the button and text in a fixed position without moving the navigation outside of ...

twitter-bootstrapcssbootstrap-4