Various image margins while floating in different directions

How can I dynamically adjust the margins of an image based on its alignment? My website uses Rich Text Format pages with django-ckeditor. Users can align images to the right or left when inserting them.

<figure class="image" style="float:right">
        <img height="180" width="280" src="/media/about/team/images.jpeg">
        <figcaption>Hello world!</figcaption>
    </figure>

I want the image to align nicely with the text block's outer edge. This means that the outer margin and padding should be 0, while the inner margin should be around 1em.

Can this be achieved using CSS styles? I vaguely recall seeing it on a website before, but I can't remember where.

The idea is that if the element already has a style of "float: left," then the left margin should be 1em and the right margin should be 0, and vice versa.

cssalignmentcss-floatmargin

Answer №1

If you have the knowledge that the float:left or float:right is included in the HTML markup, you can utilize them as selectors for additional styling. For example:

figure {
  margin: 0;
}
[style*='float:left'] {
  margin-right: 1em;
}
[style*='float:right'] {
  margin-left: 1em;
}
hr { 
  clear:both;
}
section {
  text-align: justify; /* to visually indicate where the margins are */
}
<section>
<figure class="image" style="float:left">
    <img height="180" width="280" src="/media/about/team/images.jpeg">
    <figcaption>Hello world!</figcaption>
</figure>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
<hr>
<section>
<figure class="image" style="float:right">
    <img height="180" width="280" src="/media/about/team/images.jpeg">
    <figcaption>Hello world!</figcaption>
</figure>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>

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

Choosing changeable object label in CSS

Looking for a way to style multiple customized HTML tags (Angular.js directives) that share the same suffix? Imagine you have three modal tags that you want to style similarly: 1. <a-modal> 2. <b-modal> 3. <c-modal> Is there a selector ...

cssangularjs

Additional room on the right-hand side

I've been working on my website, www.ribbonhill.co.uk, and I'm facing an issue with a white space on the right side that only appears on mobile phones. Interestingly, this problem doesn't show up in full mode on Chrome and Edge browsers. Ho ...

htmlcssresponsive

Is it feasible to obtain multiple tag-name indexes using JavaScript?

Exploring the table search function provided by W3Schools has brought up an interesting question in my mind. Is it feasible to simultaneously retrieve multiple indexes using getElementsByTagName and conduct a search across the entire table instead of just ...

javascripthtmlcsshtml-table

sIFR version 3.6 - Hyperlink not functioning in Opera browser - appearing as plain text in Internet Explorer

I am experiencing a challenge with sIFR in Opera and IE. In Opera, the link is not functioning properly, while in Internet Explorer sIFR does not appear at all, displaying only regular text. This issue does not occur in either Firefox or Google Chrome. W ...

csssifr

Tips for positioning a div with z-index to cover another div when hovering

I'm working on a container div that contains multiple smaller div elements, all with the style rule float:left;. When I hover over one of the smaller div elements, I want it to increase in height and width while overlaying the other div elements witho ...

csshoverpositionz-index

Adjust Image Width to Full - Bootstrap

I am having trouble creating a full-width header using Bootstrap v5. Despite searching the site, I have not been able to find a solution that works for me. *{ box-sizing: border-box; font-size: 16px; } .no-padding { padding-l ...

htmlcsstwitter-bootstrap

What steps can I take to address resolution challenges when creating a full-screen website design?

While developing my fullscreen website, I encountered an issue with the resolution on smaller screens, particularly when using a laptop. The scroll bar appeared and pushed the footer down due to problems with padding and margins. I attempted to address thi ...

htmlcssresponsive-designmedia-queriesresolution

Is it necessary for me to replicate this function? - jQuery

I have developed a function that creates a transparent information overlay on a current div for a mobile web app. Context: I am using jQTouch, which means I have separate divs instead of loading individual pages anew. $(document).ready(function() { ...

javascriptjqueryhtmlcssjqtouch

The styling of a CSS class in Internet Explorer may not be applied correctly if there are multiple elements sharing the same class name

For nearly a full week now, I've been plagued by a persistent issue! Here's the situation: I have 6 step tabs - step 1, step 2, and so on. Each tab has a CSS class called "locked" and "active." "Locked" - this style features top: 3em;, causing ...

javascriptjquerycssinternet-explorer

The animation unexpectedly resets to 0 just before it begins

Currently, I am developing a coverflow image slider with jQuery animate. However, there are two issues that I am facing. Firstly, when the animation runs for the first time, it starts at `0` instead of `-500`. Secondly, after reaching the end and looping b ...

javascriptjquerycssjquery-animatecss-transforms

Personalizing the React Bootstrap date picker

I am currently working on customizing the react-bootstrap-daterangepicker to achieve a specific look: My goal is to have distinct background colors for when dates are selected within a range and when the user is hovering over dates to make a selection. I ...

javascripthtmlcssreactjsreact-bootstrap

Changing the class of an element using CSS when hovering over another

Is it possible to dynamically change the style of another element when hovering over a specific element? For example, I want a menu item to change its appearance when hovering over a submenu item. Here is the CSS code I have: ul.menu .menulink { padding ...

jquerycss

Completely place one element with respect to its sibling element

I am currently facing a situation where I have implemented a Navigation bar wrapper that reveals an overlay across the entire page when clicked. In order for this setup to function correctly, all the elements that the overlay covers must be sibling elemen ...

htmlcssreactjspositionabsolute

How can I modify the table structure in Ruby on Rails?

Greetings! I am a beginner in the world of Rails and could really use some assistance. Below is the table data extracted from index.html.erb: <table class="table"> <thead> <tr> <th>Area& ...

htmlcssruby-on-railsrubybootstrap-4

Placing an icon directly beside two paragraphs, ensuring it is vertically centered and positioned to the right of the text

I am looking to add an icon next to two paragraphs that will be positioned exactly in the center (vertically) on the left side of the paragraphs. Here is the desired outcome: https://i.sstatic.net/RmjOR.png Currently, here is what I have: https://i.ssta ...

htmlcssbootstrap-4iconsrow

Triangles without their pointed tips

The left arrows next to the carousel blocks are missing their tips. I'm not sure what else needs to be added in the CSS to complete the triangle shape. Here is the live URL: (located next to the large image, specifically in the information carousel) ...

htmlcss

HTML- Any suggestions on how to troubleshoot my sticky navbar not functioning properly?

I'm having trouble creating a sticky navbar. I've attempted to use z-index: 999 but it's not behaving as expected. * { margin: 0; padding: 0; } .navbar { display: flex; align-items: center; justify-items: center; position: ...

javascripthtmlcss

I am struggling to assign the height style attribute to a div element

I have created the code below where I am attempting to set a div to 'display: flex' and include two divisions, one with a width of 200px and the other with a width of 100%. <div style="clear:both;display:flex; height: 100%;"> <div ...

htmlcssflexbox

CSS: The hover effect must be triggered by a "click" event

I recently came across a helpful thread on Stack Overflow regarding CSS hover effects only triggering on click. I have implemented a Bootstrap4 dropdown-menu with a hover effect to display the dropdown items. .my-menu ul li { list-style: none; c ...

htmlcssbootstrap-4

"Utilizing Bootstrap's Table Features within the Moodle Platform

Hey there! I'm currently in the process of updating a client's Moodle website. Our goal is to create responsive tables on the homepage, but I've encountered some challenges. Due to conflicts with other Moodle libraries, I wasn't able to ...

cssmoodlebootstrap-table