Illustration next to content featuring a heading and a paragraph

I've been working on a website design and trying to position text next to an image. It seems like a simple task, but I'm struggling to make it work.

Here's an illustration of how I want the layout to look:

So far, here is the HTML code I've experimented with:

<div class="example">
    <div class="eg1">
        <img src="eg1.gif" />
        <h2>Example 1</h2>
        <p>This is an example</p>
    </div>
    <div class="eg2">
        <img src="eg2.gif" />
        <h2>Example 2</h2>
        <p>This is another example</p>
    </div>
</div>

and my attempted CSS styling:

.example {
    display: inline-block;  
}

.eg1, .eg2 > img {
    float: left;
}

.eg1, .eg2 > h2 {
    float: left;
}

.eg1, .eg2 > p {
    float: left;
}

However, the result is not at all what I wanted. The elements are stacked vertically instead of side by side, with the text appearing in the wrong position relative to the images.

What would be the most effective way for me to achieve the desired layout?

Answer №1

Perhaps it could look something like this?

<div class="block">
    <figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
    <h1 class="title">the title here</h1>
    <p class="excerpt">the text goes here</p>
</div>
<div class="block">
    <figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
    <h1 class="title">the title here</h1>
    <p class="excerpt">the text goes here</p>
</div>

http://jsfiddle.net/g57bB/7/

Answer №2

Just recently, I implemented a navigation system on a website and it turned out quite well. The trick is to use the image as a background and adjust its position using the center left no-repeat properties. Even though my navigation was set up with ul and li elements, I utilized the following CSS code:

CSS

li a {
  font-size:20px;
  color:#a1b4c9;
  padding-left:75px;
  background:url(image-up.png) center left no-repeat;
  text-decoration:none;
  line-height:30px;
  text-shadow: -2px 2px 1px #123456;
}

li a:hover {
  color:#654321;
  display:inline-block;
  padding-left:75px;
  background:url(image-hover.png) center left no-repeat;
  text-shadow: -1px 1px 0px #a1b4c9;
}

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

Tips on accessing the v-model value with a parameter in VUE

Looking to access the v-model value using a parameter, I attempted the following code: <template> <div v-for="(item, idx) in data"> <input :id="item" :v-model="item"></input> <button @click=&q ...

Is there a way to create a dynamic CSS class without relying on the use of IDs?

Is there a way to create a dynamic CSS class without using an ID? $( "#mydiv" ).css( "width", $("#widthtextbox").val() ); $( "#mydiv" ).css( "height", $("#heighttextbox").val() ); I am looking to implement multiple CSS classes for this task. ...

Building a personalized payment experience using Python Flask and Stripe Checkout

I'm attempting to set up a customized checkout integration with Stripe on my Flask web application and I've encountered some issues. After copying the code from the Stripe documentation (located at https://stripe.com/docs/checkout#integration-cu ...

Issue encountered while attempting to compress tailwindcss

I attempted to reduce the size of my tailwindCSS by creating a script in my package.json: "tw:prod":"NODE_ENV=production npx tailwindcss-cli@latest build ./src/css/tailwind.css -o ./public/css/tailwind.css", However, I encountered the ...

Removing whitespace from a Bootstrap carousel is a common task that can be easily accomplished with

What is causing the gap on my page when viewing it on a mobile device or different screen size? How can I eliminate this gap? All images have uniform height and width. ...

Is there a method to implement a pop-in animated contact form without the use of Javascript or query selectors?

Although I was successful in creating a contact form with this functionality using Javascript, I encountered some difficulties when attempting to achieve the same result without it. My goal is for the form to slide in from the right when the "open" icon is ...

Having difficulty retrieving an angular file from a location outside of the asset folder

I'm encountering issues with a small project that is meant to read a log and present it in table format. Here is the outline of the project structure: project structure Within the LOG directory, I should be able to access motore.log from my DataServi ...

Can a ng-repeat value be assigned to a text input field?

<tr ng-repeat="person in users" ng-class="{'chosen': person.AdmissionID == currentSelection}" ng-click="selectRow(person.AdmissionID)"> <td>{{person.AdmissionID}}</td> <td>{{person.AdmissionNumber}}</td> ...

How can AJAX be utilized with both file and text inputs?

I have a basic form enclosed in a modal window, dynamically generated using jQuery: <form name="altEditor-form" id="altEditor-form" enctype="multipart/form-data" role="form"> <div class="form-group"> <div class="col-sm-5 col-md- ...

What is the proper way to address the error message regarding requestAnimationFrame exceeding the permitted time limit?

My Angular application is quite complex and relies heavily on pure cesium. Upon startup, I am encountering numerous warnings such as: Violation ‘requestAnimationFrame’ handler took 742ms. Violation ‘load’ handler took 80ms. I attempted to resolve ...

Encountering challenges while integrating Angular with a Laravel forum creation project

Currently, I am working on building a forum application that involves users, posts, and comments using Laravel. However, the next step in my project requires integrating Angular, which is new territory for me and I'm not sure where to start. I have a ...

Choose checkboxes based on the checkboxes that were previously selected

My goal is to have a checkbox automatically selected based on the previously selected checkbox. For example, if I select the first checkbox (which has a specific class), then only the checkbox with the same class as the first one should be selected using j ...

How to efficiently handle data binding for multiple users sharing common inputs within a table on an ASP.NET Razor Page?

I am currently working on a project that involves populating a table with member information such as name and email. Within this table, there are columns where a "warning" can be entered for each member, along with a textbox for additional information rega ...

Ways to style specific dates on a datepicker?

Is there a way to customize the appearance of the first and last selected days in my ui datepicker for booking, similar to the design shown in the image linked below? https://i.sstatic.net/bKnRS.jpg var dateFormat = "DD/MM/YY", ...

Updating the text of an element will occur only when the specified condition has been met

I am trying to dynamically change the text within the <span data-testid="recapItemPrice">ZADARMO</span> element from 'ZADARMO' to 'DOHODOU' only when the text inside the parent element 'INDIVIDUÁLNA CENA PREP ...

Is the second parameter of the function being used as a condition?

Why is it necessary to validate the helpText argument within the function to be non-equative to null when its ID is linked with the span tag? The functions task is to set and clear help messages in the form field using built-in CSS classes. <input id ...

There are two separate CSS files linked to the same page, but the browser is only rendering the styles from

I am in the process of developing a new web page where I want to implement my own CSS and incorporate some components from this source: . I'm facing an issue with one of the components, as the browser seems to be applying only the styles from my custo ...

The significance of Z-index in Embedded Email Subscription Code

I am encountering an issue with a pop-up window I have created for visitors to sign up for our mailing list. The problem is that the CSS menu appears on top of the pop-up, despite setting the menu's z-index to 9999. How can I adjust the z-index in the ...

Tips on concealing JavaScript values from being detected during web inspection

I need to securely pass a secret code from my backend to the front end and store it in my JavaScript script. Here is an example of how I want to achieve this: <script> var code = '<%= code %>' </script> Once the us ...

Optimizing Animation Effects: Tips for Improving jQuery and CSS Transitions Performance

Wouldn't it be cool to have a magic line that follows your mouse as you navigate through the header menu? Take a look at this example: It works seamlessly and smoothly. I tried implementing a similar jQuery script myself, but it's not as smoot ...