Left align metadata in article heading

  • legarreta

    (@legarreta)


    11 years, 4 months ago

    Hi everyone,

    I’m sure this is a pretty simple fix, but it would be great if one of you can help the coding impaired. I added a byline element to my single.php file and, well it shows up fine, I was really hoping I would be able to find away to have it on the same line as the date, with the date being aligned on the left side and the author being aligned on the right. The way I have it they are on separate lines.


    Here’s a visual example:

    And here’s the code that I used to get the element.

    ‘<!– ” style=”font-size: 11px;”><i class=”icon-chevron-left” ></i>  BACK

    –>
    <h1><?php the_title(); ?></h1>
    <p>By: <?php the_author_link(); ?></p> <p> <?php echo get_the_date(); ?></p>
    <hr class=”blog-title-rule”/>
    </div>’

    What do I need to add, and where? Any help is appreciated!

Viewing 1 replies (of 1 total)
  • innuvo

    (@innuvo)

    11 years, 4 months ago

    You could certainly get them in by putting the two seperate paragraphs in div tags and then floating one to the left and one to the right.

    So you would use this html:

    <div id="author">Author Here</div>
<div id="date">02nd January 2015</div>

    Obviously changing the contents of the div tags to contain your php. Then using this CSS, you can have them on the same line but one left and one right:

    #author {
    display: inline-block;
    float: left;
}
#date {
    display: inline-block;
    float: right;
}

    Here is how it looks on JSfiddle: http://jsfiddle.net/euaqda3c/

Viewing 1 replies (of 1 total)

The topic ‘Left align metadata in article heading’ is closed to new replies.

Tags