The <p> element is not displaying as anticipated

https://i.sstatic.net/mC3j5.png

After removing all unnecessary code, I am left with just the HTML and CSS. Despite trying different approaches to resolve the issue, both my colleague and I are puzzled by why the p tags are not aligning at the top of their container element. How does it maintain alignment with the other p tags in separate containers?

Normally, a bit of debugging would unveil the solution, but this time it remains a mystery...

The only certainty is that inline-block plays a role in causing this discrepancy:

.mixItems .mix{
  display: inline-block;
 }

<div class="mix gridView" > 
    <img src="http://placehold.it/350x200">
    <p class="newsHead">News Headline</p>
    <p class="abstract">Lorem ipsum</p>
</div>

Codepen Demo

htmlcss

Answer №1

To adjust the alignment of inline-block elements, set .mixItems .mix to have a vertical-align:top property instead of the default vertical-align:baseline.

.mixItems {
  padding: 2% 2% 0;
  text-align: justify;
  font-size: 0.1px;
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
}
.mixItems:after {
  content: '';
  display: inline-block;
  width: 100%;
}
.mixItems .mix,
.mixItems .gap {
  display: inline-block;
  width: 99%;
  overflow: hidden;
  vertical-align: top /* new */
}
@media all and (min-width: 568px) {
  .mixItems .mix,
  .mixItems .gap {
    width: 49%;
  }
}
@media all and (min-width: 992px) {
  .mixItems .mix,
  .mixItems .gap {
    width: 23.5%;
  }
}
.mixItems .mix {
  text-align: left;
  background-color: #f7f7f7;
  margin-bottom: 2%;
  /*display: none;*/
}
.mixItems .mix.gridView img {
  width: 100%;
  display: block;
}
.mixItems .mix.listView img {
  display: none;
}
.mixItems .mix .abstract {
  color: #000;
  font-size: 12px;
  padding: 0 1.5em 1.5em 1.5em;
}
.mixItems .mix .newsHead {
  color: #666;
  font-size: 12px;
  padding: 1.5em 1.5em 0 1.5em;
  font-size: 14px;
  font-weight: bold;
}
<div class="container">
  <div id="mixContainer" class="mixItems">
    <div class="mix gridView category-1 category-z" data-myorder="2016" data-date="20160115">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20160115</p>
    </div>
    <div class="mix gridView category-3 category-w" data-myorder="2013" data-date="20130115">
      <!--<img src="http://placehold.it/350x200">-->
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20130115</p>
    </div>
    <div class="mix gridView category-1 category-x" data-myorder="2013" data-date="20130230">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20130230</p>
    </div>
    <div class="mix gridView category-2 category-y" data-myorder="2015" data-date="20150430">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20150430</p>
    </div>
    <div class="mix gridView category-1 category-x" data-myorder="2014" data-date="20140115">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20140115</p>
    </div>
    <div class="mix gridView category-1 category-z" data-myorder="2016" data-date="20160115">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20160115</p>
    </div>
    <div class="mix gridView category-3 category-w" data-myorder="2014" data-date="20140330">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20140330</p>
    </div>
    <div class="mix gridView category-2  category-x  category-y" data-myorder="2012" data-date="20120315">
      <img src="http://placehold.it/350x200">
      <p class="newsHead">News Headline</p>
      <p class="abstract">Lorem ipsum 20120315</p>
    </div>
  </div>
</div>

Answer №2

Give this a shot and observe the outcome:

.arrangeItems .arrange{
    show: inline-block;
    align: middle;
}

Normally, the vertical alignment is set to baseline, causing the <p> elements to remain at the bottom.

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 could be causing the slider to have a choppy transition between images?

The Issue: Looking at this GIF, you can see that the image transitions are not seamless. The slider is built on Bootstrap. I am also trying to ensure that the slider's body does not always adjust to the new image but maintains a minimum size. I have ...

htmlcssbootstrap-5

Assistance Needed with XPATH and CSS for Selenium Automation

Can anyone assist me in finding the appropriate XPATH/CSS locator to extract text from the structure below? <div class="page-header song-wrap"> <div class="art solo-art"> <div class="meta-info"> <h1 class="page-title"> Zehnaseeb I ...

cssseleniumxpath

Selecting elements using XPath

My goal is to target an i element using the following XPath: //div[contains(text(), "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32565356564153565341725e5d5d1c515d5f">[email protected]</a>")]//parent//i[contains(@c ...

htmlseleniumxpathselenium-webdriver

In-line divs are known for their rebellious nature, refusing to conform to traditional

I'm in need of some assistance with taming my unruly HTML. It seems to be misbehaving lately. The content area on the page I'm currently designing has a two-column layout. Instead of using separate containing divs for each column, I opted for a ...

htmlcssstyles

Creating CSS-style overlayed images that are resizable

I have a collection of images all the same size, and I want them to be overlaid on top of each other. I've tried setting the position of the images to absolute, but this causes an issue with the container not adjusting its size accordingly. Additiona ...

htmlcss

Aligning two lines next to a radio button using HTML and CSS

I'm facing a challenge where I want to align two lines in the middle of a radio button. Despite my efforts, I am able to line up the top line but struggling with the bottom one. I prefer not floating the radio button as it's being styled using a ...

htmlcss

Tips for managing media queries in HTML emails on Gmail

When sending out my website's responsive HTML emails, I utilize media queries to ensure optimal display. However, I have noticed a discrepancy in how Gmail/Inbox interprets the max-width parameter in the media query. Instead of referencing the HTML em ...

htmlemailgmailmedia-queriesinbox

PHP code to create a search form with a dropdown menu

I'm currently working on developing a simple advanced search feature where users can input a keyword and select a category from a dropdown menu. The search functionality will then display results that match both the selected category and keyword in th ...

phphtmlmysql

unable to press the electron button

I am currently working on a project that involves connecting PCs together for screencasting. While following an online coding tutorial, I encountered an issue with clicking the button to generate the ID code. Here is the code snippet from app.js: // Code ...

javascripthtmlnode.jsjson

Conceal the choice if its value matches that of another option

My goal is to create a code that will hide an <option> if its value matches the value of the first option (which is retrieved dynamically with PHP). Here's the initial code snippet: <select onChange="this.form.submit()" name="cart[<?php e ...

javascriptjqueryhtmllistboxhtml-select

How can I make my opacity change on hover without the need for JavaScript?

I've been attempting to design a book cover that will become fully visible when hovered over, but for some reason it's not working #book_cover { display: block; margin-left: auto; margin-right: auto; width: 25%; height: 71%; ...

htmlcss

Unlocking the secrets of CSS3 3D Transform Perspective

While experimenting with CSS3 3D Transform on Safari, I realized that the 3D model is quite complex for me to grasp initially. Upon referring to the official W3C Document, I discovered that all transform rules in CSS3 are converted into a transform matr ...

csshtml

What steps should I take to fix the "loading page" issue in VS2010?

Upon attempting to debug (F5) my website, I encountered the following error message: "Firefox cannot locate the server at www.localhost.com." Switching to IE did not resolve this issue either. Any suggestions on how to fix this problem would be greatly ...

asp.netvisual-studio-2010html

The CSS file is displaying a repeating background image

While developing my mvc4 application, I encountered an issue with setting the background in layout.cshtml. Despite adding the background-repeat:no-repeat tag, my background image continues to repeat. I have searched extensively online and tried various sug ...

htmlcssasp.net

Troubleshooting problem with Materialize CSS in UI router

Incorporating Materialize CSS along with Angular's ui.router for state management and HTML rendering has led to a challenge. Specifically, the Materialize Select component is not initialized upon state changes since Materialize components are typicall ...

javascriptangularjshtmlangular-ui-routermaterialize

What is the best way to complete a CSS animation and load a new URL simultaneously?

I was thinking of incorporating a series of fade-ins, followed by a fade-out, and concluding with the loading of a new page (target=self). After some research online, it appears that CSS animations do not include the functionality to fetch a new URL as the ...

jqueryhtmlcss

What could be causing the font of the background text to change when CSS3 animation is applied?

Have you ever noticed a font style change in the background text when applying CSS3 animations for opacity and scale transforms? I have some text content on my page, including a "Click me" link that triggers a popup with a CSS3 animation. However, I'v ...

jqueryhtmlcss

Styling a parent element when it is in focus using CSS3

Is there a way to apply a style to the parent element when an input is in focus? input:focus { background-color:yellow; } For example, if we have the following HTML: <div class="foo"> <input type="text /> Hello </div> I ...

htmlcss

Obtaining the radio button value from the form in the view.py file

I am encountering a challenge in extracting the radio button value within my view.py file. Despite successfully retrieving all values, I am unable to obtain the radio button value. Various attempts have been made utilizing both POST and GET methods but no ...

pythonhtmldjangoview

Issue with mobile responsiveness - Adjust Bootstrap classes or review media query placement

My media query seems to be getting out of control as I attempt to create a timeline with bullets. I find myself adding too many queries in an effort to align the bullets properly along the timeline. https://i.sstatic.net/Apav5.png I strongly believe that ...

twitter-bootstrapcssbootstrap-4media-queries