How to make a div not get below the other div's when zooming in

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 开发者_JS百科position:relative; in the wrapper and position absolute in the menu_box items.

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>

Your question isn't very clear, but you probably want:

div.menu_box_item
{
    display: inline; /* this line is only needed for some old browsers */
    display: inline-block;
}

Also, it looks like you're creating a list of links across the top of the page? You should be using <ul> and <li> tags for that. For example:

<ul id="nav_menu">
  <li><a href="foo">Foo</a></li>
  <li><a href="bar">Bar</a></li>
</ul>

ul#nav_menu
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

ul#nav_menu li
{
  display: inline; /* this line is only needed for some old browsers */
  display: inline-block;
  min-width: 100px; /* minimum width of your nav items */
}