Excessive white space at the bottom of a floated image within a small parent element

I need help with styling a page that will only be viewed on mobile Safari. The HTML markup is as follows:

<blockquote>
  <p><img src="..."/> A paragraph...</p>

  <p>...</p>

  ...
</blockquote>

Here is the CSS used:

blockquote {
  border-left: 1px solid #888;
}

blockquote img {
  float: left;
  margin: 0 20px 20px 0;
}

With long paragraph text, the desired effect is achieved:

| IMAGE  A paragraph, blah blah blah...
| IMAGE  blah blah blah...
| IMAGE  
|        More paragraph, blah blah blah...
| blah blah blah, blah blah blah...

You can view an example here.

The whitespace between the image and text is important, but when the paragraph text is short, there is an unwanted margin at the bottom which stands out due to the left border line:

| IMAGE  A paragraph, blah blah blah...
| IMAGE  blah blah blah...
| IMAGE  
|

You can see this issue in action here.

If you have any suggestions on how to solve this problem without requiring all quotes to be long enough, please share. Even a JavaScript solution would be acceptable. Thank you!

javascripthtmlcssiossafari

Answer №1

Modify the following:

blockquote img {
  float: left;
  margin: 0 20px 20px 0;
}

to this:

blockquote img {
  float: left;
  margin: 0 20px 0 0;
}

UPDATE:

I removed the following and it appeared to solve the issue:

blockquote:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

The problem was that this hidden element came after the image with clear:both, causing the blockquote to be tall enough to contain both text and image. To visualize, add a temporary border to the blockquote:

blockquote {
    border: 1px solid #00ff00;
}

I chose neon green because it stands out and is not commonly used, making it easy to spot any leftover debug code.

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

What is the best way to retrieve data attributes from multiple div elements that share the same class name?

I have multiple div elements with the same class name. I want to extract the data attribute from these div's. I have tried some code and managed to get the result. However, I am unsure if this is the best approach for retrieving data("cartid"). Any as ...

javascriptjquery

What is the best way to create a container filled with numerical figures?

If I have the number 445758, and I want each of these numbers to be displayed in their own box like this: https://i.sstatic.net/hBiA4.jpg Can you explain how to achieve this? ...

htmlcss

Error message found: "Uncaught TypeError: e[n] is undefined while setting up redux store in a reactjs application

Delving into the world of Redux for the first time, I decided to tackle the Todo List example from the official redux.js.org website. After testing the code, everything seemed to be working fine with the redux store initialized only with the reducer as a p ...

javascriptreactjsreduxreact-redux

Ways to incorporate line spacing using CSS

Is there a way to adjust the spacing between the drop down boxes in the sidebar so that they align neatly with the questions in my section? select { font-family: 'Courier New', monospace; color: black; font-weight: bold; font-size: 3 ...

htmlcssinline

Updating a marker's latitude and longitude using Laravel, Google API, and Ajax: A step-by-step guide

I'm struggling with sending the marker coordinates to a controller using ajax. I have named my routes 'update-marker-position' and included csrf_token(), but I am still seeing an error message in the logs. In my web.php file: Route::post(&a ...

javascriptajaxgoogle-mapsgoogle-api

Experimenting with the testing of two distinct functions

Hello, I am new to the world of testing and I would appreciate some guidance. I have two functions that I need help with. The first function is a bits-per-second converter that converts data into a more readable format. const convertBitrate = bitrate =&g ...

javascriptreactjstestingreduxjestjs

Definition of a class in Typescript when used as a property of an object

Currently working on a brief .d.ts for this library, but encountered an issue with the following: class Issuer { constructor(metadata) { // ... const self = this; Object.defineProperty(this, 'Client', { va ...

javascripttypescripttypescript-definitions

Creating a 3D slider on Owl-carousel 2: A Step-by-Step Guide

I am trying to create a slider using Owl-carousel, but I'm having trouble implementing it. I came across this example https://codepen.io/Webevasion/pen/EPMGQe https://i.stack.imgur.com/KnnaN.jpg However, the code from this example doesn't seem ...

htmljquerycssowl-carousel

Center text within CSS shapes

.myButton { float: right; border-top: 40px solid pink; border-left: 40px solid transparent; border-right: 0px solid transparent; width: 25%; } <div class="myButton"> Submit </div> This snippet is the code I have written to create a ...

htmlcssionic-frameworkcss-shapes

Obtain Data for Visualizing Graph with JSON within a Database-connected Graph (highchart.js)

In the process of creating a database-driven graph, I am utilizing libraries from Codepen. These libraries include: THIS and Highchart.js The HTML file on display simply showcases the chart, while the main data processing is handled in an index.js file t ...

javascriptjqueryjsonhtmlhighcharts

Unable to transform Table layout into DIVs

My form for data input consists of labels with inputs, but the labels are localized so I am not sure about the length of text for different languages. To tackle this issue, I initially used a table layout: <table> <tr> <td> ...

htmlcsshtml-table

Creating fluid designs for my boxes with CSS to enhance responsiveness

I have designed my HTML file with 8 boxes that appear correctly on desktop, but when viewed on mobile devices, the columns are misaligned and shifted to the right side instead of being centered. How can I make it more responsive? See Preview Here is the ...

css

Tips for designing a webpage where a div element adjusts to fit the screen, regardless of the width of the content inside

Can CSS3 or a JavaScript library be used to create a webpage with a div that contains content wider than the screen, such as a large image or newsletter, and still fits it to the screen without scrolling or clipping any content? Below is an image demonst ...

csshtml

Failure to Present Outcome on Screen

Seeking assistance! I attempted to create a mini loan eligibility web app using JavaScript, but encountered an issue where the displayed result did not match the expected outcome upon clicking the eligibility button. Here is the HTML and JavaScript Code I ...

javascripthtmlcssbootstrap-4

Use the Arrow Keys to guide your way through the Page

I am looking to enhance user experience by allowing them to easily navigate through my webpage using the arrow keys on their keyboard. The goal is for users to be able to move from one section to the next in a seamless manner, unless they are focused on an ...

javascripthtml

How to integrate a chips feature in Angular 4 using Typescript

Struggling to incorporate a chips component into my Angular web application, which comprises Typescript, HTML, and CSS files. After grappling with this for weeks without success, I have yet to find the right solution. To review my current code, you can a ...

htmlcssangulartypescript

Unable to Call ZF2 Controller Function

I have been attempting to send a post value to the OrderController using ZF2. I have included JavaScript code in the view folder. Below are the codes: function submitHandler(form) { var urls = '<?php echo $this->baseurl; ?>/order/save ...

javascriptphpzend-framework2

Activating the mousewheel effect exclusively on specific div sections, rather than the entire page

After researching mousewheel events in jQuery, I realize that my lack of knowledge may be hindering my ability to find useful answers. I am looking to create a mousewheel effect that is only triggered within a specific div called #scroller. Currently, I am ...

javascriptjqueryhtmlcssmousewheel

Is fs-extra the best tool for working with a .bundle file?

I am attempting to determine whether a specific folder in my project includes a .bundle file and, if it does, relocate it to another location. If the file is not found, I will use a default option instead. The problem I'm encountering is that I am una ...

javascriptnode.jsnpmbundlefs

"Why does adding a new span create space between it and the previous ones, and what can be done to prevent this from

Essentially, it creates the equation "a + b = c". However, I need to create "a + b = c" instead. HTML: <div class="container"> <span id="b__value">+b</span> <span id="c__value">=c</span> &l ...

javascripthtmlcss