Using CSS to position a pair of divs containing text and images side by side

Is there a better approach to creating two divs and two pictures without using negative margins, similar to the example shown here?

Answer №1

HTML

<div>
    <img src="yourimage.jpg" align="left" />
    <p>some text</p>
</div>
<div>
    <img src="yourimage.jpg" align="left"" />
    <p>some text</p>
</div>

CSS

div { margin:0 0 20px 0; }
p { padding:4px 0 0 30px; display:inline-block }

I believe this method is the most efficient and minimal approach.

Here is the working version:

http://jsfiddle.net/J28YS/2/

Revised Version

http://jsfiddle.net/J28YS/6/

Answer №2

After analyzing your image, here are my conclusions:

  • The images have the same height but may vary in width
  • The images should be centered in relation to each other
  • The text will not wrap into multiple lines
  • You want the text to consistently start on the same line

HTML:

<div class="item">
  <div class="image-wrapper">
    <img src="{image source}" alt="{alternate text}" />
  </div>
  <p>some text</p>
</div>

CSS:

.item { 
  overflow: hidden;
}

.image-wrapper { 
  width: 200px; /* or the maximum width of the images */
  height: 100px; /*or the height of the images */
  float: left;
  margin-right: 20px;
  text-align: center;
}

.item p {
  float: left;
  margin: 0;
  line-height: 100px;
}

Check out the working fiddle with visual demonstrations in different colors.

Answer №3

Is it necessary to avoid using negative margins?

In any case:

HTML Code:

<div class="container">
    <img src="grey.gif" width="60" height="60">

    <p>Some text</p>
</div>

<div class="container">
    <img src="grey.gif" width="60" height="60">

    <p>Some text</p>
</div>

CSS Styling:

.container {
    overflow: hidden;/* To contain the floated image */
    margin-bottom: 20px;
}

.container img {
    float: left;
    margin-right: 30px;
}

Visit for more information.

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

Various height divs are arranged in two columns and float accordingly

My goal is to have two columns that stack divs of varying heights in the order they appear. These divs are created dynamically, causing some challenges with alignment when floated at 50% width. For example, div #4 may end up being significantly taller tha ...

Change the width of the webpage inside the iframe

I am working with an iframe that has a fixed width and height of 400px. I want to load a web page in the iframe, but I need to adjust the width of the source to fit my iframe perfectly. The height is not an issue as I can add a scrollbar if needed. Here ...

Having trouble getting the AJAX script to change the background in Internet Explorer?

I'm currently experiencing an issue with an ajax script. Here is the code I am using: <script type="text/javascript"> $(document).ready(function() { $('#savecolor').click(function(){ var myVar = 'data= ...

Element does not cross both explicit and implicit columns

When working in a grid container with only 1 column and 1 row, if there is an implicit column in the first row, how can an element in the second row (as shown by the green column in the example) span across both the explicit and implicit columns? I appreci ...

The mysterious behavior of HTML 5 causing images to mysteriously add a 3px margin at the

Whenever I update my website to <!DOCTYPE HTML> Each img element enclosed within a DIV mysteriously acquires a 3px bottom margin, even though no CSS rule defines it. To clarify, there are no style attributes responsible for this 3px bottom margin. & ...

Increasing the size of text in CSS with the use of ":hover" and then causing it to return to its original smaller size

Allow me to explain my goal here. I have text displayed on my website that I would like to enlarge when the user hovers over it and then shrink back down when they move their cursor away. The issue I'm facing is that after enlarging the text using t ...

Is there a way to utilize jQuery to redirect to the href included in the HTML attachment?

I am looking to add a redirection feature to my website using the href provided in the code by jQuery. This will be done after playing an animation for better user experience. $(document).ready(function(){ $("a").click(function(event){ event.prev ...

Developing a PHP foreach loop that integrates seamlessly with a W3 responsive grid

Is there a way to generate multiple sets of three columns using w3.css and a foreach loop to fill each set with data from a sample database? Attempted code resulted in all the columns being in a single row: <?php foreach ($products as $index => $pro ...

The attempt to execute 'removeChild' on 'Node' was unsuccessful because parameter 1 is not the correct type. Although it did remove the elements from the DOM, it only did so once

It's quite a challenge I'm facing!!! Although there have been similar questions asked before, they were all for specific scenarios. I am currently developing a tictactoe game using the module design pattern. The function below helps me create tw ...

Updating the CSS: Using jQuery to modify the display property to none

I am facing an issue with displaying an element that is defined as display:none in CSS. I tried to use the .show() function in jQuery, but it's not working as expected. Here's the code snippet: CSS .element { position: absolute; display: no ...

Creating uniform-sized cards with CSS and Bootstrap

Is there a way to ensure consistent card size across all lines? I've noticed that the cards in the second line are taller. Can we base the height of all cards on this? https://i.sstatic.net/KgZwu.png Below is the HTML code: <div class="row"&g ...

How can I create an input field that comes with a preset value but can be updated by the user with a different name?

I am in need of a solution that will enable a user to update text on a webpage dynamically. I have been unable to find any information on how to achieve this. Is there anyone aware of a method to implement this feature? Perhaps a library or utilizing Vue ...

Transforming a Bootstrap 4 dropdown navbar by replacing the caret with Fontawesome 5 icons for Plus and Minus

After spending several days trying to find a solution, I am still struggling. I have managed to create a responsive Navbar with Dropdowns using Bootstrap 4. Now, my goal is to replace the caret with a Plus and Minus sign at the end of each row on small dev ...

Setting line height as a pixel value does not yield the desired result

$(element).css(options.css).attr(options.attr).addClass(options.class) //ensure line-height is correctly assigned if($(element).is('p') && _.isString(options.css['line-height'])){ console.log('line-height assigned: &apos ...

Animate linear-gradient using jQuery script

I have been searching for a circular progress bar plugin but haven't found one that suits my needs, so I decided to build my own using pure CSS: http://jsfiddle.net/9RFkw/ While it looks great, there are two issues I am facing: 1.) When at 25% in F ...

Efficient Techniques for Concealing and Revealing Navigation Menus using HTML, CSS, and JavaScript

I need help making the menu icon toggle the navigate menu between showing and hiding when clicked on the top right corner of the screen. For better understanding, here is an accompanying image: https://i.stack.imgur.com/oy6d9.png However, the current co ...

Tips for avoiding the display of the overall scrollbar while utilizing grid with an overflow:

In my react-redux application, I am utilizing the material ui Grid component for layout design. The structure of my code is as follows: <div> <Grid container direction="row" spacing={1}> <Grid item xs={3}> ...

Unable to conceal adjacent element when z-index is set as 1

I encountered an issue where a modal is overlapping another element, and the close button of the underlying element has a z-index of 1. Despite creating a new modal with its own close button, the original close button remains visible on top. I attempted t ...

Design your HTML select element with a unique custom arrow where the text elegantly appears over the arrow

I've encountered an issue with a select element in my HTML page that has a custom arrow. The problem is that the text within the select element overlaps with the arrow, which is not desired. I'm seeking a cross-browser solution for this specific ...

What is preventing Firefox and IE from displaying images fully in a list item?

I am trying to create a slideshow with two separate sliders using li elements for that purpose. It works perfectly in Chrome and Safari, but I am encountering issues in Firefox and IE. In Firefox, the slideshow works fine in quirks mode but not in standar ...