Center div between middle and left

Question

I have a logo aligned to the center, and when I adjust the width of the screen / window, it keeps perfectly in the center. To the left of the logo I have a small menu with two words, I want this menu / div to always be between the logo and the left edge.

Can this only be done with CSS?

Assuming the logo has its own widht 200px , but I can fix it with margin-left: -100px; . And when it comes to screen size, where it no longer fits on the left !, I will put it under the @media screen and (max-width: px) { ... } logo.

Like this: http://postimg.org/image/v148gyc9b/

Answer 1

If the logo has a fixed size of 200px, you can try something like this :

 #menu { position: absolute; top: 0; bottom: 0; width: calc(50% - 100px); } 

Answer 2

Say you have this html:

 <div class="header"> <div class="menuContainer"> <div class="menu"> Menu <!-- Your Menu here --> </div> </div> <div class="logo">Logo</div> </div> 

Your logo has a static width, and you don't want it to be a percentage width, so you can make .menu take the place between the logo and the left edge using this css:

 .menuContainer { width: 50%; padding: 0 50px; /* 50 is (logoWidth/4) */ margin-left: -50px; /* 50 is (logoWidth/4) */ margin-right: -50px; /* 50 is (logoWidth/4) */ box-sizing: border-box; position: relative; float: left; } 

Remember to change this “50px” when you change the width of the logo with the media.

Here is a working example in JSFiddls: http://jsfiddle.net/3047kfkn/