absolute positioned image appearing out of wrapper when minimizing window

Question

I have a small issue. I searched for relative issues but couldnt find anything. I would like to fix this issue without Scripting if possible, and without adapting body width.

So here we go. I would like the Logo to display INSIDE the box area as it appears on Maximized Window.

Also i would not like to put relative position to the element since it puts a large margin between header and Navigation Bar.

I've tried playing with body width and setting it in other container. No Luck.

You can see what i mean in here:http://imageshack.us/g/43/q3qr.jpg/.

And here is the code: http://jsfiddle.net/NCZg8/4/`
>

  <div id="page" class="hfeed site">
     <header id="masthead" class="site-header" role="banner">
        <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
            <img class="Logo_wrapper" src="http://pizza-bar.gr/wordpress/wp-content/uploads/2013/09/PB_Logo.png"/>
        </a>
      </body>`

Note: try to stretch the "Result" Window and u will see what i mean. Ty in advance.

Answer 1

In order to keep the element from going out of boundaries on the right side, you should be setting the right property instead of the left.

.Logo_wrapper{
    position:absolute;
    top:40%;
    right:5%;
    z-index:10;
}

Updated fiddle: http://jsfiddle.net/NCZg8/6/

Also i would not like to put relative position to the element since it puts a large margin between header and Navigation Bar.

In order for the logo to appear inside the header, it's important to set position:relative on the header element. To see a more detailed explanation of relative and absolute positioning, see here: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Your problem of margin can probably be fixed with css.