CODEWITHSUNDEEP
htmlcss
Gary C
Gary C

Reputation: 41

span tag inside <p> tag to make other half of the contents on the right side

 h1 {
        text-align: center;
    }
    
    p {
        font-family: verdana;
    }
 
    
    <h1>Taxes</h1>
    <p>Gross Income: <span style="text-align:right;">$250, 000.00</span></p>

Let's say I want to display Gross Income: on the left side and $250, 000.00 on the right side of the page (both will need to be on the same line).

How would I go about doing this? Current code does not work.

Upvotes: 1

Views: 557

Answers (2)

kojow7
kojow7

Reputation: 11384

One of the more modern ways of laying out a website is with flexbox. You can specify display: flex in the parent container and set the flex proportion in the child containers. Something like this should work:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-align: center;
}

div.total {
    font-family: verdana;
    display: flex;
}

div.total div {
    flex: 1;
}
</style>
</head>
<body>

<h1>Taxes</h1>
<div class="total">
    <div>Gross Income:</div>
    <div style="text-align: right">$250, 000.00</div>
</div>

</body>
</html>

Also, do not use a <p> tag unless it actually is a paragraph.

You can check out caniuse.com to see browser compatibility with flexbox.

Upvotes: 0

codesayan
codesayan

Reputation: 1715

Use float <span style="float:right;"> .

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    text-align: center;
}

p {
    font-family: verdana;
}
</style>
</head>
<body>

<h1>Taxes</h1>
<p>Gross Income: <span style="float:right;">$250, 000.00</span></p>

</body>
</html>

Upvotes: 1

Related Questions