Utilizing grid for styling headings and paragraphs with h3, h4, and p tags

Looking for help with aligning posts in columns? Here's the code and display challenge:

<div class="post-inner"> <h3 class="post-header"><a class="post-title" href="http://www.yellowfishjobs.com/job/sales-representative/">Sales Representative</a></h3>
<p class="post-excerpt"></p><h4>Location: Belfast</h4>
<h4>Job Type: Full-time</h4>
<p> <a href="http://www.yellowfishjobs.com/job/sales-representative/#more-2222" class="more-link">(more…)</a></p>
</div>

The current display looks like this:

Sales Representative
Location: Belfast
Job Type: Full-time
(more…)

Desired display to align in columns:

Sales Representative Location: Belfast Job Type: Full-time (more…)

A CSS attempt using grid layout:

.listing_page .post-inner {
  display:grid;
  grid-template-columns: 300px 50px 50px 50px;
  grid-template-rows: 100px ;
}

.listing_page .post-inner h3 {grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: row1-start
  grid-row-end: 1}
.listing_page .post-inner h4:nth-child(1) {grid-column-start: 2;
  grid-column-end: 1;
  grid-row-start: row1-start
  grid-row-end: 1}
.listing_page .post-inner h4:nth-child(2) {grid-column-start: 3;
  grid-column-end: 1;
  grid-row-start: row1-start
  grid-row-end: 1}
.listing_page .post-inner p {grid-column-start: 4;
  grid-column-end: 1;
  grid-row-start: row1-start
  grid-row-end: 1}

If you can provide assistance on why it's not working without changing HTML, I would greatly appreciate it. Thank you!

css

Answer №1

While this solution may not align with your exact requirements, it is effective based on the information available to us. By utilizing display: inline-block; for all child elements, you can achieve the desired layout:

.post-inner > * { 
  display: inline-block; 
}
<div class="post-inner"> 
  <h3 class="post-header"><a class="post-title" href="http://www.yellowfishjobs.com/job/sales-representative/">Sales Representative</a></h3>
  <p class="post-excerpt"></p><h4>Location: Belfast</h4>
  <h4>Job Type: Full-time</h4>
  <p> <a href="http://www.yellowfishjobs.com/job/sales-representative/#more-2222" class="more-link">(more…)</a></p>
</div>

To target specific items for inline display, consider creating a helper class like .inline-block and applying it selectively to those elements.

Answer №2

Despite your request not to alter the HTML, I couldn't resist making some changes: 

  <table style="width=100%">
  <tr>
  <td width=25%>
  <div class="post-inner"> <h3 class="post-header"><a class="post-title" href="http://www.yellowfishjobs.com/job/sales-representative/">Sales Representative</a></h3></div>
</td>
<td width=25%>
  <p class="post-excerpt"></p><h4>Location: Belfast</h4>
  </td>
  <td width=25%>
<h1>Job Type: Full-time</h1>
</td>
<td width=25%>
<p> <a href="http://www.yellowfishjobs.com/job/sales-representative/#more-2222" class="more-link">(more…)</a></p>
</td>
</tr>
</table>
 </body></html>

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

Using jQuery to eliminate the 'disabled' attribute from CSS

After using the .val() method to enter data into a text box, I noticed that when trying to click "add", the button appears disabled. <input class="btn-primary action-submit" type="submit" value="Add" disabled=""> If I manually type in text, the dis ...

javascriptcss

I am encountering an issue with opening a dropdown select option upon clicking in C# while using Selenium

I am encountering an issue while attempting to open the Register page from my account. The UI developer utilized Bootstrap code, and Bootstrap developers have included a JS function on click. However, when I execute this code, an error is thrown: "OpenQA.S ...

c#cssseleniumselector

Tips on maintaining and hiding the vertical scrollbar when a popup is open, alongside the navigation bar positioned at the top of the page

After reviewing this pen, my goal is to create a popup that maintains access to the navigation bar (hence avoiding Bootstrap's Modal). However, I am facing the challenge of keeping the scrollbar visible while preventing scrolling in the background whe ...

javascripthtmlcss

Bootstrap scrollspy feature experiencing malfunction

I am encountering an issue with scrollspy on Bootstrap version 5.1. Despite following the examples in the documentation (links provided below), I am unable to make it work; there are no visible changes when scrolling. My goal is for the corresponding link ...

htmlcssbootstrap-5scrollspy

How can we make Internet Explorer 11 mimic Internet Explorer 9 in HTML?

How can I ensure that Internet Explorer 11 uses CSS styles from IE9 in my HTML? I have tried the following code: <script runat="server"> private void Page_PreRender(object sender, EventArgs e) { var meta = new HtmlMeta() ...

htmlcssinternet-explorer

Implement JQuery UI Accordion to enhance navigation on mobile devices

I am implementing the JQuery UI Accordion to expand content on a website. Below is the basic markup structure: <div class="accordion"> <h2>Heading</h2> <div>Content</div> <h2>Heading</h2> <div& ...

jqueryhtmlcssjquery-ui

Prevent the navigation bar text from being truncated

The below code snippet: <div data-role="navbar"> <ul> <li><a href="#page_1" data-transition="none">Heading 1</a></li> <li><a href="#page_2" class="ui-btn-active ui-state-persist">Heading 2</a& ...

cssjquery-mobile

Update breadcrumbs dynamically by clicking on each horizontal panel

I've been dealing with a problem for the past 24 hours. I want to implement a horizontal accordion with breadcrumbs on a webpage. How can I achieve this dynamically, so that when a user clicks on any link in the accordion, the breadcrumbs update simul ...

javascriptjqueryhtmlcssbreadcrumbs

Challenges with incrementing in Jquery's each loop and setTimeout

http://jsfiddle.net/fxLcy/ - an example showcasing the use of setTimeout. http://jsfiddle.net/fxLcy/1/ - this demo does not include setTimeout. Although all elements are correctly positioned, I am in need of that delayed animation =/ My goal is to arrang ...

javascriptjqueryhtmlcss

Display or conceal various content within div elements using multiple buttons

I have a set of 5 image buttons, each meant to trigger different content within a div. When the page loads, there should be default content displayed in the div that gets replaced by the content of the button clicked. The previously displayed content shoul ...

javascriptjqueryhtmlcssshow

Tips for aligning an HTML button with a hyperlink

<form method="get" action=https://www.wwf.de/spenden-helfen/allgemeine-spende> <button type="submit">Donate Now</button> I am facing an issue where the button is appearing randomly on my website, but I need it to ...

htmlcssbuttonstylespositioning

Safari is having trouble correctly displaying a CSS3 gradient with transparency

Here's a tricky puzzle for you. The gradient below is not displaying correctly in Safari, but it works perfectly fine in Firefox and Chrome: background: linear-gradient(transparent 124px, #de6230); I've even attempted the following fix without ...

csssafari

PHP Email Styling Techniques

While working on a website, I encountered an issue with the automated email sent upon registration. The email was displaying the CSS code. $body '<span style="color:#444444;">Header</span>'; I attempted to use a code from online tha ...

phphtmlcssemailstyles

Exploring jQuery's selection techniques involving filtering and excluding elements

How can I select all elements with the class .Tag that are not equal to the element passed to the function? Here is my current attempt: $("a.tag").filter(":visible").not("\"[id='" + aTagID + "']\"").each( function place(index, ele ...

javascriptjquerycss

Tips for preventing errors in formatting?

I created a field using rectangles as divs. However, when I add content to the rectangle divs, the formatting gets messed up. Can anyone help me fix this issue? Here's the link <div class='line' id='line1'> <div class=& ...

htmlcss

Is there a way to adjust the height of an image to be responsive in tailwind css?

<!-- this is the section with the services description and an image of an egg --> <!-- this is the first section with the description --> <div class="flex flex-1 flex-col items-center lg:items-start p-4"> &l ...

htmlcsstailwind-css

What is the process for adding a Contact Us page to a website?

I recently created a website using html, css and Javascript. I would like to include a 'get in touch' page where visitors can send me messages directly on the site. What steps should I take to make this happen? Is it necessary to set up a databas ...

javascriptcss

Navigating with the keys is disabled until an item is chosen

Currently working on a Shopify website for a client and encountered an issue where the keys don't scroll down upon page load unless a specific element is clicked or tab is used. I am not sure what caused this unexpected behavior, it may have occurred ...

javascriptcssvue.jsshopify

Django: Struggling with static files and navigating paths for CSS rendering

Sorry to ask, but I'm struggling with a problem and could use some help: My project directory has the following structure (there are more directories, but for now let's focus on these): projectfolder/ wsgi/ openshift/ templates ...

htmlcssdjangodjango-templatesdjango-staticfiles

Adjust the panel size accordingly for smaller screens

My application is utilizing the Spotify API to retrieve names and images. These are then displayed on my webpage within cards/panels in the following format: <div class="col-md-4" v-if="type == 'tracks'" v-for="(track, index) in tracks"> ...

htmlcssvue.js