Utilize CSS to align text to the right with floating properties

I have devised the following:

Now, I want the 'independent' section at the top to be aligned to the right like the 'interactive' section. I attempted to use float: right; but it didn't work.

Here is my code:

.badgesblock{style: 'padding-left: 30px;'}
  .independent
    = image_tag 'independent.png', style: 'float:left;'
    .independentcopy{style: ''}
      %p{style: 'font-weight: bold;'} Independent
      %p{style: 'width: 450px;'} We are the sole independent user review platform for wedding vendors. Businesses cannot manipulate reviews on their listings – this is why your clients trust us.
  %br
  %br
  .verified
    = image_tag 'verified.png', style: 'float:right;'
    %p{style: 'font-weight: bold;'} Verified
    %p{style: 'width: 450px;'} Every review and reviewer is verified. Each user inputs their personal information and authenticates their profile with a wedding date and photo. This results in a genuine, reliable review system.
  %br
  %br
  .interactive
    = image_tag 'interactive.png', style: 'float:left;'
    .interactivecopy{style: 'float:right;'}
      %p{style: 'font-weight: bold;'} Interactive
      %p{style: 'width: 450px;'} Passive display advertising has a limited impact. We offer a distinct chance to actively engage with potential clients and exhibit the stellar service at the core of your enterprise.

What am I overlooking in the CSS?

cssruby-on-rails

Answer №1

Here is a great example of utilizing a reusable CSS component known as the media object.

It serves as a fundamental element with an image, video, or any content paired with text on either the left or right side.

/** Custom media object **/
.media {
  overflow: hidden;
}

.media-item {
  float: left;
  margin-right: 25px;
}

.media.flipped > .media-item {
  margin-right: 0;
  margin-left: 25px;
  float: right;
}

/** Specific styles **/
.badge {
   /* ... */
}
<div class="badgesblock">
  <div class="media badge independent">
    <a href="#" class="media-item">
      <img src="http://placehold.it/250x150"/>
    </a>
    <div class="media-body">
      <p><strong>Independent</strong></p>
      <p>We’re the only independent user review site for wedding suppliers. Businesses can’t vet reviews on their listing – that’s why your customers trust us.</p>
    </div>
  </div>
  <div class="media badge flipped verified">
    <a href="#" class="media-item">
      <img src="http://placehold.it/250x150" />
    </a>
    <div class="media-body">
      <p><strong>Verified</strong></p>
      <p>All reviews and reviewers are verified. Each user fills in their personal details and verifies their profile with a wedding date and a picture. The result is an authentic, trustworthy review system.</p>
    </div>
  </div>
  <div class="media badge interactive">
    <a href="#" class="media-item">
      <img src="http://placehold.it/250x150" />
    </a>
    <div class="media-body">
      <p><strong>Interactive</strong></p>
      <p>Passive display advertising has limited impact. We provide a unique opportunity to actively engage with potential customers and showcase the great service at the heart of your business.</p>
    </div>
  </div>
<div>

Answer №2

h2, p {
  margin: 0;
}

.section {
  border: 1px solid red;
  display: inline-block;
  width: 100%;
}
.section:nth-child(odd) img {
  float: left;
  margin-right: 15px;
}
.section:nth-child(even) img {
  float: right;
  margin-left: 15px;
}
<div class="badgesblock">
  <div class="section independent">
    <img src="http://placehold.it/100x100" />
    <div class="independentCopy">
      <h2>Independent</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae mollitia voluptates est, porro dolor suscipit perspiciatis asperiores, dolorum dicta vel sunt, cupiditate, animi reiciendis quis similique fugiat. Vel, ut, dolore.</p>
    </div>
  </div>
  <div class="section verified">
    <img src="http://placehold.it/100x100" />
    <div class="verifiedCopy">
      <h2>Verified</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae mollitia voluptates est, porro dolor suscipit perspiciatis asperiores, dolorum dicta vel sunt, cupiditate, animi reiciendis quis similique fugiat. Vel, ut, dolore.</p>
    </div>
  </div>
  <div class="section interactive">
    <img src="http://placehold.it/100x100" />
    <div class="interactiveCopy">
      <h2>Interactive</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae mollitia voluptates est, porro dolor suscipit perspiciatis asperiores, dolorum dicta vel sunt, cupiditate, animi reiciendis quis similique fugiat. Vel, ut, dolore.</p>
    </div>
  </div>
</div>

You have the freedom to style it in your own way. I applied some unique css selectors like nth-child to simplify the process. However, feel free to use any other methods like class targeting. This code snippet provides a basis for achieving your desired design.

Consider .section:nth-child(odd) as: 


    .section.independent img,
    .section.interactive img { }

http://codepen.io/pacMakaveli/pen/jPEegN

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

Is utilizing fixed-top/fixed-bottom with inner div elements set to a fixed height the most effective strategy?

I am working on developing an app similar to stackoverflow, with fixed menu and footer panels and an inner div that creates browser scroll as needed. I'm wondering if the code below is correct for achieving this setup. The classes fixed-top/fixed-bot ...

htmlcssbootstrap-4fixed

Challenge in WordPress Development

As a beginner in website building, I am looking to customize the background of my pages with a solid color. The current SKT Full Width theme I am using has an opaque background which is causing the text on my slider to blend in and not look appealing. All ...

javascriptjqueryhtmlcsswordpress

CSS box spacing is the key factor in creating clear layouts and

Having these 3 boxes is causing some spacing issues that I need to address. Whenever I try to add margin, the third box shifts to the next row. Below is the snippet of code: CSS: #hotels { background: url('../img/PICS/19427110_ml.jpg'); ...

htmlcsstwitter-bootstrap

Unveiling the intricacies of CSS specificity

Struggling with the specificity of this particular CSS rule. Despite researching extensively, I still can't seem to grasp it. Can someone help me determine the specificity of the following: #sidebar h1, p em, p a:hover{ ... } ...

csscss-specificity

Adjust image loading according to screen dimensions

I am working on HTML code that currently displays an image. The code looks like this: <div> <img id="wm01" alt="PP" title="PP" u="image" src="theImages/wm01.jpg" /> </div> My goal is to show a different image based on the screen si ...

javascripthtmlcss

"Glowing orbs in the night: a dark mode spectacle with

I have implemented a night mode (or perhaps dark mode) toggle button located at the top-right corner of my webpage. Here is a link to a perfect example showcasing what I am aiming for However, unlike the provided link, I switch between night mode and lig ...

javascripthtmlcsskeyframe

`Modifying CSS in Bootstrap 4 for a personalized website design`

I am currently building a Bootstrap website for my sister, but I am facing issues with changing the CSS. Most of the time, the changes do not seem to take effect. I created a new file called "style.css" to override the Bootstrap styles and placed it below ...

cssbootstrap-4

CSS printing displays a blank bar in white color

Attempting to generate a ticket with the dimensions of 203mm x 82mm using HTML and CSS through Python (including cgi, jinja2, weasyprint). The template will be converted into a PDF for users to download via a button on the website. The HTML Body: <body ...

htmlcssprintingcgiweasyprint

A bottom border that spans the entire width, complete with padding

I am attempting to create a uniform border for each item on my list. However, due to the nested structure of the list, I have used padding to achieve this. As a result, the appearance is as expected and behaves normally. https://i.sstatic.net/cHNb3.png ...

htmlcsslayoutborder

Using an HTML element to pass a variable into a replace function

I am looking to highlight a 'SearchString' by replacing it with <span style="background-color: yellow">SearchString</span> within a targetString. The SearchString varies, so I am wondering how I can make this happen. This is what I ...

javascriptjqueryhtmlcssangularjs

Avian-themed masking feature for jCarousel

Currently, I have a series of images in constant motion using jCarousel. Only one image is visible fully at any given time, and I am looking to create a "feathering" effect on the edges of the carousel so that the images smoothly fade in and out as they co ...

javascriptjqueryhtmlcssjcarousel

Customize the appearance of the date input box in MUI KeyboardDatePicker

Currently, I am attempting to customize the appearance of the KeyboardDatePicker component including board color, size, font, and padding. However, none of the methods I have tried seem to be effective. Here is what I have attempted so far: 1 . Utilizing ...

cssreactjsdatematerial-uistyles

The pure css overlay does not display correctly on Chrome

Could you take a look at the link provided below (just widen the result window a bit) and let me know why there are white lines on top and on the sides of the boxes when the hover overlay is fully loaded? Even when I use a background image for those divs, ...

cssgoogle-chromehoveroverlayopacity

Using CSS GRID for creating layouts with customized grid-template-areas that include empty cells and automatic placement

Struggling with implementing the css grid layout module to showcase a 12-column, 3-row grid. The initial row should only contain two elements, positioned on each side of the grid with empty cells in between using ten periods. Subsequent rows should autom ...

htmlcsscss-grid

DOMPDF - Comparing background URL rendering between Linux and Windows

When converting HTML to PDF, my image doesn't show on a Linux server. On localhost, the image displays properly. Here is my CSS code: background: red url("<?php echo __DIR__ ?/my_img.png"); However, on the Linux server, the image does not appea ...

phphtmlcsslinuxdompdf

Using Javascript to automatically submit a form when the enter key is pressed

Can anyone help me with a password form issue? I want the enter key to trigger the submit button but it's not working for me. I understand that the password can be viewed in the source code, this is just for practice purposes. <!DOCTYPE html> & ...

javascripthtmlcssenter

apply a border-radius to the top right corner only without affecting the other sides or background

https://i.sstatic.net/9YIiy.jpg I have been working on creating the top right triangle design shown in the image. However, I encountered an issue where applying border radius seems to affect all sides instead of just one as intended. Despite using border- ...

htmlcssborder-box

Adjusting the width of speech balloon in CSS

This question might seem basic to those who are familiar with CSS (unlike me lol). I'm currently working on incorporating speech balloons into my website using this code from jsfiddle. However, I encountered an issue when the text inside the balloon i ...

htmlcsscss-shapes

Does MongoDB preserve the order of inserted elements?

I am working with an array of objects that need to be sorted whenever they are accessed. Here is the code snippet I have: things.sort! things.each do |thing| Thing.create!(property: some_property) The objects in the things array are strings starting f ...

ruby-on-railsmongodbmongoid

The recent update to Bootstrap v5 caused a complete disruption in the CSS of our application

My Angular app was originally on Angular 14 and used Bootstrap with SCSS compiled to node-sass/SASS package. It also utilized ng-bootstrap v11 and Bootstrap v4.3.1 for CSS styles. As part of a general upgrade, I needed to update the Angular version to 15. ...

cssangularbootstrap-4sassbootstrap-5