CODEWITHSUNDEEP
wordpresscsscss-float
iCyborg
iCyborg

Reputation: 4728

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

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

enter image description here

Upvotes: 2

Views: 20726

Answers (3)

Rick Calder
Rick Calder

Reputation: 18705

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/

Upvotes: 1

Lory Huz
Lory Huz

Reputation: 1508

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

Upvotes: 2

Matthew Trow
Matthew Trow

Reputation: 2842

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;
}

Upvotes: 3

Related Questions