I am struggling with the positioning of a menu button image below a logo div on the right side of the viewport. The issue arises when my body text starts directly below the logo div, causing it to run behind the fixed position image if it's a large paragraph.
Does anyone know how I can make the fixed-position image act as its own line, force a line break, or work with display: block to push the text down so it starts below the image?
I have attempted using display: block with the image and image div, but it seems like I might be styling it incorrectly. Clearly, I am a bit lost here, so apologies for any confusion!
<head><style>
img.logo {
height: 3em;
max-width: 80%;
width: auto;
padding: .5em;
display: block;
margin-left: auto;
margin-right: auto;}
div.menu {
width: 100%;
display: block;}
.menu img {
position: fixed;
right: .5em;
padding: .5em;}
</style></head>
<html>
<img class="logo" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
<div class="menu">
<img src="https://dl.dropboxusercontent.com/u/95732802/menu.svg">
</div>
Here is where some text should go!
</html>
You can check out the fiddle for this issue here.