skip to Main Content

Right now here my website. I am trying to place the Berkeley Image to the right side of the Modern Career Advice Logo.

http://moderncareeradvice.com/blog/

However, the problem I’m getting is that the Berkeley image stays on the bottom.

enter image description here

Currently this is my code: I am using the WordPress platform and editing a PHP file. I have never encountered sometime like this before. How would I place it to the right?

$title="<div style='float:left;'> <img src='/blog/wp-content/themes/genesis/images/logo2.png'> <img src='/blog/wp-content/themes/genesis/images/CAA_Logo.jpg'> </div>";

For some odd reason, using float:left in the div is not working…

Thanks.

Edit:

Here is my full code:

function genesis_seo_site_title() {

    //* Set what goes inside the wrapping tags
    $inside = sprintf( '<a href="%s">%s</a>', trailingslashit( home_url() ), get_bloginfo( 'name' ) );

    //* Determine which wrapping tags to use
    $wrap = is_home() && 'title' === genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : 'p';

    //* A little fallback, in case an SEO plugin is active
    $wrap = is_home() && ! genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : $wrap;

    //* And finally, $wrap in h1 if HTML5 & semantic headings enabled
    $wrap = genesis_html5() && genesis_get_seo_option( 'semantic_headings' ) ? 'h1' : $wrap;

    //* Build the title
    $title  = genesis_html5() ? sprintf( "<{$wrap} %s>", genesis_attr( 'site-title' ) ) : sprintf( '<%s id="title">%s</%s>', $wrap, $inside, $wrap );
    $title .= genesis_html5() ? "{$inside}</{$wrap}>" : '';

    //*Here is the title header


$title="<div style='float:left;'><img style='display: inline-block;' src='/blog/wp-content/themes/genesis/images/logo2.png'> <img style='display: inline-block;' src='/blog/wp-content/themes/genesis/images/CAA_Logo.jpg'> </div>";


    //* Echo (filtered)
    echo apply_filters( 'genesis_seo_title', $title, $inside, $wrap );

}

2

Answers


  1. Lots of ways to do this:

    $title="<div> <img style='float: left' src='/blog/wp-content/themes/genesis/images/logo2.png'><img style='float: left' src='/blog/wp-content/themes/genesis/images/CAA_Logo.jpg'></div>";
    

    The float should be applied to the object itself, not the parent. That would make just the DIV flot, not the IMG inside.

    Or:

    $title="<div style='float:left;'><img style='display: inline-block;' src='/blog/wp-content/themes/genesis/images/logo2.png'> <img style='display: inline-block;' src='/blog/wp-content/themes/genesis/images/CAA_Logo.jpg'> </div>";
    
    Login or Signup to reply.
  2. You can add some CSS to achieve it, you’re floating the whole container div, but the images are still showing as blocks, you can redefine this behaviour with floats on the images or with display, I’d recommend not to place the styles online but in a separated file and use class attributes to refer to the content:

    $title='<div class="inline-images"> <img src="/blog/wp-content/themes/genesis/images/logo2.png"> <img src="/blog/wp-content/themes/genesis/images/CAA_Logo.jpg"> </div>';
    

    Then in your CSS, you can have:

    .inline-images img { float: left; }
    

    or

    .inline-images img { display: inline-block; }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search