Aligning unstyled and styled text onto 1 line

Hi,

I’m sure this is a very simple fix but I’m just not quite sure on how to do this.

I would like to get the text to line up on one line on this page https://bankruptcycanada.ca/bankruptcy-bc/

As it currently displays:

Trustee:

MNP Limited

#600, 235 1st Avenue, Kamloops, British Columbia, V2C 3J4 Map

Phone:

1-888-389-0158

How I want it to display:

Trustee: MNP Limited

#600, 235 1st Avenue, Kamloops, British Columbia, V2C 3J4 Map

Phone: 1-888-389-0158

Both Trustee: and Phone: are unstyled text while MNP Limited has a style of trusteename and the phone number (1-888-389-0158) has a style of trusteephone

The HTML code is:

Trustee:

<p class="trusteename">MNP Limited</p>
#600, 235 1st Avenue, Kamloops, British Columbia, V2C 3J4 <a href="https://bankruptcycanada.ca/mnp-kamloops/">Map</a>
<p style="text-align: left;">Phone:</p>
<p class="trusteephone">1-888-389-0158</p>

The CSS Code is:

.trusteename {font-family:Raleway;font-weight:400;line-height:1.67;font-size:15px;color:#033F6D;}
.trusteephone {font-family:Raleway;font-weight:400;line-height:1.67;font-size:19px;color:#A93000;}

Thank you very much in advance))

Hi imaginex1a,
It sounds like you just need to nest your styled text in a <span>, then you can style it as desired and it will be on the same line as your unstyled text.

Then move your class to the span as shown below…

<p>Trustee: <span class="trusteename">MNP Limited</span></p>
<p>Phone: <span class="trusteephone">1-888-389-0158</span></p>

@imaginex1a, could you please format your code so we can see it properly?

Either highlight the code and select the </> icon or place three backticks (`) on the line before the code and tgree backticks on the line after tthe code.

Hi @imaginex1a,

After a closer look at the html in question (on the page you linked too) I would say that your content could qualify for being marked up as a definition list.

In doing so, the <dt> and <dl> tags would give you the styling hooks you need with minimal classes needed. It would also help to clean up the <h4>, <hr> and <strong> tags that appear to be used for their visual appearance.

Here’s an example of your content in a <dl>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Definition List - Test Page</title>
<style>
.wrap {
    width:80%;
    min-width:300px;
    max-width:800px;
    margin:0 auto;
}
dl {
    margin:30px 0;
    padding:0 10px 20px;
    overflow:hidden;
    border-top:2px solid #bbb; /*this replaces the <hr>*/
    background:#F5F5F5;
}
dt {
    float:left;
    clear:both;
    margin:20px 0 0 0;
    font-size: 1em;
    font-weight:600;
}
dt:after {
  content: ": ";
}
dd {
    float:left;
    margin:20px 0 0 20px;
    font-size: 1em;
}
dt:first-of-type,
dd:first-of-type {   /*this replaces the h4 headings and eliminates need for class*/
    font-size:1.2em;
    font-weight:600;
}
dt:first-of-type:after {content:'\00A0'}/*reset colon with &nbsp; and make the first dt&dl appear as one heading*/
dd:first-of-type {margin-left:0;}

dd a {
    text-decoration:none;
    font-weight:600;
    color: #568fbf;
}
.name, .phone {
	font-family: Raleway;
	font-weight: 600;
	/*line-height: 1.67;*/
	color: #033F6D;
}
.phone {color: #A93000;} /*reset from above color*/

</style>
</head>
<body>

<div class="wrap">
    <h1>Definition List</h1>
    <dl>
        <dt>Bankruptcy</dt>
            <dd>100 Mile House Trustee</dd>
        <dt>Trustee</dt>
            <dd class="name">MNP Limited</dd>
        <dt>Address</dt>
            <dd>#600, 235 1st Avenue, Kamloops, British Columbia, V2C 3J4</dd>
        <dt>Phone</dt>
            <dd class="phone">1-888-389-0158</dd>
        <dt>Free Evaluation</dt>
            <dd><a href="#">100 Mile House Bankruptcy Consultation</a></dd>
    </dl>
    <dl>
        <dt>Bankruptcy</dt>
            <dd>Abbotsford Trustee</dd>
        <dt>Trustee</dt>
            <dd class="name">Sands & Associates</dd>
        <dt>Address</dt>
            <dd>300 – 31935 South Fraser Way, Abbotsford, BC, V2T 1V5</dd>
        <dt>Phone</dt>
            <dd class="phone">604-210-3561</dd>
        <dt>Free Evaluation</dt>
            <dd><a href="#">Abbotsford Bankruptcy Consultation</a></dd>
    </dl>
    <dl>
        <dt>Bankruptcy</dt>
            <dd>100 Mile House Trustee</dd>
        <dt>Trustee</dt>
            <dd class="name">MNP Limited</dd>
        <dt>Address</dt>
            <dd>#600, 235 1st Avenue, Kamloops, British Columbia, V2C 3J4</dd>
        <dt>Phone</dt>
            <dd class="phone">1-888-389-0158</dd>
        <dt>Free Evaluation</dt>
            <dd><a href="#">100 Mile House Bankruptcy Consultation</a></dd>
    </dl>
    <dl>
        <dt>Bankruptcy</dt>
            <dd>Abbotsford Trustee</dd>
        <dt>Trustee</dt>
            <dd class="name">Sands & Associates</dd>
        <dt>Address</dt>
            <dd>300 – 31935 South Fraser Way, Abbotsford, BC, V2T 1V5</dd>
        <dt>Phone</dt>
            <dd class="phone">604-210-3561</dd>
        <dt>Free Evaluation</dt>
            <dd><a href="#">Abbotsford Bankruptcy Consultation</a></dd>
    </dl>
</div>

</body>
</html>
3 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.