CODEWITHSUNDEEP
htmlcss
Andrew Truckle
Andrew Truckle

Reputation: 19207

How do I right-align the second span to the lower right of the div?

How do I get the Midweek Meeting Schedule to align to the right edge? But not lose layout? I tried a div with float: right but it was not right.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>CONGREGATION NAME</title>
<style type="text/css">

body{
    width:100%;
    margin-left: 0;
    margin-right: 0;
    background: #666;
}

.containerPage {
    min-width: 210mm;
    max-width: 210mm;
    padding-left: 2mm;
    padding-right: 2mm;
    margin-left: auto;
    margin-right: auto;
    background: #FFF;
}

.containerMeeting {

}

.textCongregation {
    text-align: left;
    font-family: Calibri;
    font-size: 11pt;
    font-weight: 700;
    text-transform: uppercase;
}

.textTitle {
    text-align: right;
    font-family: Calibri;
    font-size: 18pt;
    font-weight: 700;
}

@media print {
    body{
        background: #FFF;
    }

    .containerPage, .containerMeeting,  {
        width: 99%;
        min-width: 99%;
        max-width: 99%;
        padding-left: 0;
        padding-right: 0;
        margin-left:auto;
        margin-right:auto;
    }

}</style>
</head>

<body>

<div class="containerPage">
    <div class="containerMeeting">
        <div style="border-bottom: 1px grey solid;">
            <div style="border-bottom: 4px red solid; margin-bottom: 2px;">
                <span class="textCongregation">Congregation Name</span>
                <span class="textTitle">Midweek Meeting Schedule</span> </div>
        </div>
    </div>
</div>

</body>

</html>

Also tried:

<div class="containerPage">
    <div class="containerMeeting">
        <div style="border-bottom: 1px grey solid;">
            <div style="border-bottom: 4px red solid; margin-bottom: 2px;">
                <span class="textCongregation" style="float:left">Congregation Name</span>
                <span class="textTitle" style="float:right">Midweek Meeting Schedule</span> </div>
        </div>
    </div>
</div>

But the text is aligning downwards.

Thank you.

Upvotes: 0

Views: 201

Answers (3)

Johannes
Johannes

Reputation: 67798

an alternative solution: use a table: Create an additional div around the two elements in question (or use the existing div that has border-bottom: 4px red solid; margin-bottom: 2px; for this), make that surrounding container display: table; width: 100%; and assign the two to-be-aligned elements display: table-cell and a fixed or percentage width.

Upvotes: 1

Felix Edelmann
Felix Edelmann

Reputation: 5162

You can set text-align only to block elements (e.g. div), not to inline elements (e.g. span, b, a).

As @Johannes said, make the two spans to divs. But I won't suggest using float and the top property – this maybe won't work on smaller screens when the text wraps. Instead, use a flex layout.

Set the direct container as flex container by adding display: flex. Also add justify-content: space-between to make the both text divs be at the ends. At last, add align-items: baseline to make the texts be on the same horizontal baseline. That's it!

Working fiddle: https://jsfiddle.net/ay3hectf/5/

Edit: Here's a good guide on how to use flex layouts: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Johannes
Johannes

Reputation: 67798

a <span> element is by default an inline element and therefore cannot be aligned or floated. However, you can change its display property to display: block. Then you can use float (left or right) on it, or define it as absolutely positioned and align it right with right: 0px(However, with the latter you will also have to adjust the vertical position (for example with top: 100px) if you do that on more than one element.

Upvotes: 0

Related Questions