Adding space between the heading and the text underneath by placing a margin between h2

I am dealing with a situation where I have an 

<h2 class="landing-panel-title>
containing a 
<span class="landing-panel-icon-right ion-ios-search-strong>
. The second class on the span is from an icon font called ionicons. Despite this, it may not be important in this context.

This setup consists of a header and an accompanying icon. My goal is to create a margin between the icon and the title that adjusts itself dynamically (I want the icon all the way to the right when it follows text, and the text all the way to the right when the icon is placed left of the text). I attempted to use text-align for this purpose, but so far, I haven't been successful.

http://jsfiddle.net/eakfsLr3/

HTML:

<div class="landing-panel">
        <h2 class="landing-panel-title">Site Reviews<span class="landing-panel-icon-right ion-ios-search-strong"></span></h2>
        <p class="landing-panel-text">I've been exploring various PTC sites, gathering information, conducting tests, and compiling useful and relevant findings.</p>
    </div>
    <div class="landing-panel">
        <h2 class="landing-panel-title"><span class="landing-panel-icon-left ion-erlenmeyer-flask"></span>Methodical Approach</h2>
        <p class="landing-panel-text">We've collected data, tested relevant information alongside my partner, and he's leveraging our guides and knowledge to advance his career in PTCs.</p>
    </div>
    <div class="landing-panel">
        <h2 class="landing-panel-title">Results<span class="landing-panel-icon-right ion-clipboard"></span></h2>
        <p class="landing-panel-text">We don't peddle nonsense, we provide credible information deemed authentic and effective by our team. Enjoy the content!</p>
    </div>

CSS:

.landing-panel {
        background-color: #d5f5e3;
        padding: 0.5em;
        margin-bottom: 0.5em;
    }
    .landing-panel-title {
        width: 100%;
    }
    .landing-panel-icon-right, .landing-panel-icon-left {
        color: #913D88;
        font-size: 3em;
    }
    .landing-panel-icon-right {
        text-align: right;
    }
    .landing-panel-icon-left {
        text-align: left;
    }
    .landing-panel-title, .landing-panel-icon, .landing-panel-text {
        margin: 0;
        padding: 0;
    }

Any assistance provided will be highly valued.

htmlcss

Answer №1

It seems like you are looking for this solution: http://jsfiddle.net/sergdenisov/yv2xazjh/1/

.landing-panel {
    background-color: #d5f5e3;
    padding: 0.5em;
    margin-bottom: 0.5em;
}
.landing-panel-title {
    display: table-cell;
    width: 100%;
}
.landing-panel-icon {
    display: table-cell;
    color: #913D88;
    font-size: 3em;
}
.landing-panel-title, .landing-panel-icon, .landing-panel-text {
    margin: 0;
    padding: 0;
}

.landing-panel-icon + .landing-panel-title {
    text-align: right;
}
<div class="landing-panel">
    <h2 class="landing-panel-title">Site Reviews</h2>
    <span class="landing-panel-icon ion-ios-search-strong">Icon</span>
    <p class="landing-panel-text">I have been searching for different PTC sites, collecting knowledge and data, testing the theories, and made a general collection of what I found useful and relevant.</p>
</div>
<div class="landing-panel">
    <span class="landing-panel-icon ion-erlenmeyer-flask">Icon</span>
    <h2 class="landing-panel-title">Methodical Approach</h2>
    <p class="landing-panel-text">We have collected data and tested the relevant info through my partner in crime, and he's using our guides and the knowledge to build his career in PTCs.</p>
</div>
<div class="landing-panel">
    <h2 class="landing-panel-title">Results</h2>
    <span class="landing-panel-icon ion-clipboard">Icon</span>
    <p class="landing-panel-text">We won't serve you nonsense, we provide trustworthy information that our team has validated as effective. Enjoy reading!</p>
</div>

Answer №2

Change the span's style to display:inline-block

    span {
    display:inline-block; /*this allows margins to take effect*/
    margin: 0 10px;
}

Answer №3

Give this a shot

.header-content>span{
width:..px /*adjust as needed */
display:inline-block;
text-align:center;/* align left or right */
}

If you prefer a small margin between them, try adding &nbsp; before the span element

For an icon to appear on the right of the header:

.header-content>span{
position:absolute;
right:0;
/* Keeps the icon on the right at all times */
}

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 right height and width to use in CSS?

I find it challenging to decide when to use rem, em, px, or % in web design. Although I know the definitions of each unit, I struggle with knowing the appropriate situations to utilize them. What guidelines should I follow to determine which one to use? ...

htmlcssheightwidth

Can HTML/CSS be used to specifically target handheld mobile devices?

I am looking to optimize my video display in HTML by only showing it on desktop browsers. The difference in bandwidth between desktop and mobile devices is affecting the performance of mobile browsers, so I want to target only desktop users. Is there a way ...

javascripthtmlcssvideomobile

Utilizing the CSS :not() selector within a nested table

I am having an issue with my AjaxControlToolkit where the main-page CSS is affecting the inner "calendar" popup. To illustrate what I need, what I've tried, and the temporary workaround, I have simplified everything into a one-page example. I am in s ...

csscss-selectorsajaxcontroltoolkit

AngularJS Cascading Dropdowns for Enhanced User Experience

There is a merchant with multiple branches. When I select a merchant, I want another dropdown list to display the data from merchant.branches. The following code does not seem to be fixing the issue: <label>Merchant:</label> <select ng-if= ...

javascripthtmlangularjs

The two <p> elements are being pushed to the right column, which is not their intended display

A snippet of less.css code is available at this link: #content { overflow: hidden; width: 100%; p { float: left; width: 465px; padding: 0px 25px 0px 35px; margin: 0px; br { line-height: 2. ...

htmlcsscss-floatless

Hiding my valuable content with a sneaky CSS nav bar

My current issue involves the nav bar overlaying my content Here is a link to the problem for reference I am seeking advice on how to resolve this issue, as I'm unsure of what steps to take The nav bar functions properly in responsive/mobile mode, ...

htmlcsscss-float

Replacing hyperlinks based on the user agent of a mobile device can be done using a few

I am struggling with the following HTML code that checks for a useragent from a Blackberry device. I want to customize the download URL based on the specific device, such as redirecting a user with a 9800 device to a designated download link. Can anyone ...

htmlmobileblackberryuser-agent

The CSS transition timing seems to be malfunctioning as not all elements are smoothly transitioning, specifically the text within the li and anchor tags is not

I'm attempting to achieve a smooth transition effect on a navbar when hovering over it, changing the color from one to another. The navbar contains a list of words, but I am encountering an issue where during the transition, there is a quick flash (ap ...

htmlcssangularsass

Is there a way for me to display a gif similar to 9GAG on my

I'm looking to implement a feature on my website that allows me to pause and play a gif, similar to the functionality on 9gag. Can anyone provide guidance on how I can achieve this? I understand that I need to use both .jpg and .gif files, but my at ...

javascriptjqueryhtmlcss

Using JavaScript to dynamically retrieve element IDs

Within the content on my page, there are multiple tables displaying product information along with their respective authors. Additionally, there is a div that contains hyperlinks for each author. Currently, I am linking the authors' names to hyperlink ...

javascriptjqueryhtml

Using XSLT with JavaScript

I am currently working with a set of XML files that are linked to XSLT files for rendering as HTML on a web browser. Some of these XML files contain links that would typically trigger an AJAX call to fetch HTML and insert it into a specific DIV element on ...

javascripthtmlxmlajaxxslt

It's possible for anyone to enhance the appearance of the Download button by adding styles without compromising its functionality

Looking to enhance the style of the Download button as it appears too formal. Seeking assistance in adding some button styles to make it more stylish. The code is correct, just aiming to give the Download button a trendy look with specified styles. ...

javascripthtmlcss

allowing absolutely positioned region to expand

For further information, please visit this page: test page In the process of designing a website, I have implemented a sidebar featuring an accordion style vertical navigation bar. The sidebar is set to be absolutely positioned in relation to its containi ...

jquerycsspositioningcss-position

Submitting values in URI through an HTML form

Hey there, I'm really in need of some assistance with this issue that's been driving me crazy... :) So, I'm working on a project using Symfony2 and AngularJS: <form class="navbar-form navbar-right" role="form" action="" method="post"> ...

htmlangularjsformssymfonyform-submit

Tips for defining the width of columns that adapt to different screen sizes in Bootstrap version 4

Utilizing Bootstrap 3, I can effortlessly create a responsive table with adjustable columns using the grid system. Additionally, I have the ability to hide certain columns on smaller devices. For instance, consider this example where the table consists of ...

csstwitter-bootstrapresponsivenessbootstrap-4

How to perfectly position multiple tables using CSS

I am relatively new to the world of HTML and CSS. I have successfully created several tables, but now I am struggling to display them all on a single line within a designated box. Despite my best efforts, I have not been able to achieve the desired result. ...

htmlcsscss-tables

The Bootstrap card is elegantly framed by a crisp white border surrounding the

After referencing a tutorial, I implemented the following code: <div class="card" style="width:400px"> <img class="card-img-top" src="image.png" alt="Card image"> <div class="card-body"> <h4 class="card-title">John Doe</ ...

csstwitter-bootstrapbootstrap-4

Performing code execution in MVC 5 View every 1 second

I am currently working on a MVC 5 web application and I have a question regarding performing real-time calculations in the view. Below is an example of my view code: var timeRemaining = Model.account.subscriptionEndDate - DateTime.UtcNow; Is there a way ...

htmldatetimerazorasp.net-mvc-5asp.net-mvc-views

Achieving text-overflow: ellipsis functionality with mandatory content following

I have a list containing text and corresponding counts, displayed as follows: +----------------------------+ | Text A (123) | | Some other text (456,789) | +----------------------------+ Due to space limitations in my UI, I need to ensure ...

css

What size should I use for creating a responsive website?

After scouring the internet, I stumbled upon numerous dimensions referred to as proper for developing responsive designs. However, I am specifically interested in identifying the ideal breakpoints, particularly for mobile devices with small screens like ...

htmlcssresponsive