Having div in the middle of top div

I hope I explain this right. I have a top div (black menu bar) and then I have a bottom div (yellow bg). I am wanting to make my bottom div come up half way on the menu. Below is an image of what I am trying to get.


Here you go…I typically use the pseudo element trick, though @PaulOB might have a better, shinier method.

These days, an easy way to do that would be to have a single div around the menu and use background gradiet to color the top half gray and the bottom half yellow. Or you could use a background image, of course, for wider support. I would just use one container div, though.

I may have misunderstood the question but if all you are after is to have the following div’s background rise up and under the menu then just use a negative bottom margin on the menu, You may need to set position:relative and z-index on each to be sure of the stacking level.

1 Like

Worked like a charm. Thank You. I had it going in the right direction, I just needed to use a 2 for the z-index instead of 1.

Thanks Again