Question

I have searched without any answers. I know I should do something like

<div class="menu_wrapper">
 <div class="menu_box_item"></div>  <div class="menu_box_item"></div> 
</div>

When zooming in the div’s appear under each other. I have tried using position:relative; in the wrapper and position absolute in the menu_box items.

Answer 1

The div’s appear under each other because they are block elements. If you want them side by side change class to this:

.menu_box_item {float: left; width: 50%;}

You can also try to add this under your item classes:

<div style="clear:both"></div>