How to align text on header right side with the logo ? (right now it comes below the header)

1 Views

I have this code in my header.php file, the text “ALIGN_THIS_TEXT_ON_RIGHT” do gets shown on right hand side but it is horizontally below the logo and description where as I want it to float on right hand side, so the top of the text starts from where the top of logo starts. 

<hgroup>
     <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
     <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
     <p style="text-align: right;">ALIGN_THIS_TEXT_ON_RIGHT</p>
</hgroup>

I want it like this

Read More

enter image description here

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. Very simple fiddle:

    http://jsfiddle.net/Gcf3U/1/

    Not the most semantic CSS in the world, but demonstrates the use of basic floats.
    Wrap a div around your h1 and h2. Float that div left.
    Then float your paragraph right. 

    <hgroup>
    <div class="left">
     <h1 class="site-title">Your image</h1>
     <h2 class="site-description">Your description</h2>
    </div>
    <p class="right">ALIGN_THIS_TEXT_ON_RIGHT</p>
</hgroup>

.left {
    float: left;
}

.right {
    float: right;
}

  2. No additional CSS ?

    text-align have nothing to do with position of elements, text-align right mean the text is justify to right.

    Furthermore “hx” and “p” are Blocks elements, so it’s correct that each element are below each others. Here these three blocks take the full width of the parent container.

    So you can set width in your blocks + use float: left; or use display: inline-block;

    For example try to set width: 70%; for “h1” and “h2”
    Then set width: 30%; (or lower if you have additional margin/padding) and float: right; to the “p” block

  3. You really shouldn’t be doing your styles inline like that but at the moment you’re just creating a paragraph the width of the page and aligning the text to the right, it isn’t changing it’s position in the flow of the page.

    Float the p to the right.

    <hgroup>
     <p style="float: right;">ALIGN_THIS_TEXT_ON_RIGHT</p>
     <h1 class="site-title">The H1 tag</h1>
     <h2 class="site-description">The h2 tag</h2>
</hgroup>

    http://jsfiddle.net/HZ79c/