Having trouble getting the CSS to properly align the image to the right of the text

I'm trying to place text to the right of an image but my code isn't working. I have included my code below and a link to my fiddle for reference: http://jsfiddle.net/a2kjtuet/2/#&togetherjs=zvUcL6sQOE

.posText { 
 position: absolute; 
 top: 200px; 
 left: 0; 
 width: 100%; 
 }


  <img src="http://www.placecage.com/100/100"/>

  <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>    
  <p>Vestibulum vehicula odio quis ante pellentesque pharetra. Duis congue nibh in nisl iaculis iaculis. Nunc cursus est ut leo sollicitudin euismod.<br>

  Maecenas commodo dui sed interdum placerat. Duis nec semper nunc. Fusce at volutpat eros.Etiam tincidunt nulla ut mauris pellentesque, nec ullamcorper dolor scelerisque. Praesent semper pharetra viverra. <br>

  <b>Ut fermentum sodales felis quis rutrum.</b>
  </p>

  </div>
htmlcss

Answer №1

apply a left float to the picture

  <img style="float:left;" src="http://www.placekitten.com/100/100"/>

Answer №2

Utilize the power of CSS Flexbox. Take a peek at the code snippet provided below:

.posText {
  display: flex;
}

img {
  flex-basis: 100px;
  align-self: flex-start;
}

.text-container {
  margin-left: 10px;
} 

h4 {
  margin-top: 0;
}
<div class="posText">
  
      <img src="http://www.placecage.com/100/100"/>    
  <div class="text-container">
      <h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>

<p>Vestibulum vehicula odio quis ante pellentesque pharetra. Duis congue nibh in nisl iaculis iaculis. Nunc cursus est ut leo sollicitudin euismod.<br>

Maecenas commodo dui sed interdum placerat. Duis nec semper nunc. Fusce at volutpat eros.Etiam tincidunt nulla ut mauris pellentesque, nec ullamcorper dolor scelerisque. Praesent semper pharetra viverra. <br>
 
<b>Ut fermentum sodales felis quis rutrum.</b>
</p>

</div>
  </div>

I trust you find this information useful!

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 'for' attribute within HTML form labels

Is it crucial that my forms are created through a CMS? Without using jQuery, I can't determine the ID of the element to input here. Are these attributes really necessary? ...

htmlformsfor-loop

Guide on storing user input data in an array

HTML: <span *ngFor="let cust of customs"> <div class="custominfobackground col-sm-12"> <input type="email" id="widget-subscribe-form-email" name="cust{{$index}}" class="form-control required email" [formControl]="form.controls[&apos ...

htmlarraysangular

Click on ng-show to reveal more text in AngularJS

I am attempting to display an ellipsis for the content within a div, along with a '...more' text. Additionally, I am working on using ng-click to show the full text when '....more' is clicked. My goal is to add a hover class upon click ...

javascriptcssangularjsellipsis

How can you ensure a div stays at the top or bottom of a page based on the user's scrolling behavior?

Hello there! While I know there have been many questions regarding sticking a div to the top or bottom while scrolling, my particular issue is a bit more specific. My dilemma is that I am looking for the div to stick either to the top or the bottom based ...

javascriptjqueryhtmltwitter-bootstrapcss

What is the best way to ensure a grid remains at 100% width when resizing a browser window?

Within the div element, I have two child divs. One has the class col-md-2 and the other has the class col-md-10.Check out a sample view here In the image provided, the div containing hyperlinks (Database edit, invoice, preview) is not taking up 100% width ...

htmlcsstwitter-bootstrap

How can I create a tickable image grid in Nativescript Angular?

My goal is to create an image grid in a Nativescript Angular App where users can select images and then move to the next page with the selected image IDs or names. I have successfully created the image grid, but I am struggling to make the images tickable ...

htmlangularnativescript

CSS - Inconsistencies in size rendering across Chrome and Safari

I'm a Computer Science freshman and I created a website a few weeks ago. Initially, I checked it only on Safari and everything looked fine. However, when I tried it on Google Chrome, the layout appeared completely different. How can I resolve this iss ...

css

Is it possible for me to input a variable into the logical process of if(isset($_FILES['whatever']))?

I have recently started learning PHP and I'm in the process of creating a dynamic page that will update based on which form buttons are clicked. The functionality is working correctly, but my goal is to enable users to upload multiple files - either P ...

phphtmlarraysbuttonmove-uploaded-file

Conceal an element if the angular attribute does not contain any value

Currently, I am facing an issue with an image element in my project. The path for this image is being fetched from an attribute present on my angular object. However, if this imagePath attribute is empty, a broken image is displayed. I want to avoid rend ...

htmltwitter-bootstrapangularjs

Encountering a broken image icon while attempting to the text alignment with an image in a React application

Working on a React app, I'm facing an issue aligning text with an image. Currently, it's showing a broken icon which makes me question if the path to the image is correct. Check out my file structure below.https://i.sstatic.net/zQ4Xd.png The ima ...

htmlreactjsimagebootstrap-4

Ensuring responsive design: Forcing Bootstrap 3 / Knockout Navbar to collapse on mobile site view

While working on a website, I incorporated Knockout.js and added a click event to a href in the navbar. The issue is that the navbar doesn't automatically close when using it on a mobile device after the click event triggers. Is there a way to ensure ...

cssknockout.jstwitter-bootstrap-3

Does the padding attribute get passed down in CSS?

Hi there! I've been working on the following code snippet: .blah { padding: 15px; background:green; } .blah div{ background:red; } <div class='blah'> <div> foo </div> & ...

css

Unable to adjust the width of the content and sidebar

I've been attempting to adjust the width of content and sidebar on my website , but I'm not having much luck. It may seem like a simple question, but even after tweaking the CSS, I am still not seeing the desired outcome. Any assistance would be ...

javascripthtmlcsswordpress

Customizing Material-UI styles with type overrides

Is there a way to change the MuiIconButton-root class when using MuiSvgIcon with the fontSizeSmall attribute? import React from 'react' import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; const theme = createMuiT ...

cssreactjsstylesmaterial-ui

What is the best way to add a video to a web page similar to

After updating to the latest version of Firefox 3.5, I noticed something interesting on the Firefox website. There is a video that enlarges and plays when clicked. I'm curious to know if anyone has any insights on how this functionality is achieved. I ...

videohtmlfirefox3.5

Applying a variety of elements to a single function

I am in the process of creating a mini-survey and I want the buttons to change color when clicked, but return to normal when another button is selected within the same question. Currently, clicking on a button turns it red while leaving the others clear. H ...

javascripthtmlcssfunction

css, asp:listview and the use of the nth-child selector

Striving to enhance my CSS3 skills and move away from using table tags in my ASP.NET project, I am currently working with Visual Studio 2010, .NET 4.0, and VB.Net. Specifically, I am facing an issue with a listview where I am attempting to alternate the ro ...

asp.netcsslistview

I'm struggling to comprehend why this code isn't functioning as expected

There is a need to update the displayed image. The two images are stacked on top of each other, with one having an opacity of 100 (active) and should be positioned above the inactive one based on z-index. The inactive image has an opacity of 0. When one im ...

jqueryhtmlcss

Tips for effective page management

After creating a navbar in my project, I've come to the realization that it requires a component for each page and subpage. This seems redundant especially when dealing with multiple navigation options like shown in this image. Is it necessary to crea ...

htmlangularnavigationnavbar

Having trouble with setting the margin-top of a div?

When I attempted to apply the margin-top property to a div's style, it didn't have any effect. https://i.stack.imgur.com/jyY2G.png Below is the code snippet: .side { margin-left: 65%; margin-top: 3%; margin-right: 3%; border: 1px sol ...

htmlcssmargin