Floating Div Breaks on Zoom

У меня есть боковая панель с поплавком: слева, в этой боковой панели есть коробка с некоторым текстом в ней. В непосредственной близости от боковой панели находится обертка, в которой есть контент. Если я увеличиваю масштаб, все будет красивым, но боковая панель сломается и прыгнет в середину обертки, если я увеличу ее до макс. На самом деле с моей навигационной панели, последний элемент также распадается и появляется под навигационной панели ...Floating Div Breaks on Zoom

Заканчивать демку здесь (извините, если это не разрешено): http://www.ascendvault.com

HTML

<div id="navbar"> 
    <div id="navbar_items"> 
     <div class="navbar_item"><a href="#">HOME</a></div> 
     <div class="navbar_item"><a href="#">GUIDES</a></div> 
     <div class="navbar_item"><a href="#">NPC</a></div> 
     <div class="navbar_item"><a href="#">ENEMIES</a></div> 
     <div class="navbar_item"><a href="#">ITEMS</a></div> 
     <div class="navbar_item"><a href="#">SPELLS</a></div> 
     <div class="navbar_item"><a href="#">COMMUNITY</a></div> <!-- this falls under #navbar on max zoom --> 
    </div> 
</div> 
<div id="sidebar"><!-- the sidebar appears on the content_wrapper on max zoom --> 
    <div class="side_box"> 
     <div class="side_box_title"><span>VAULT FEED</span></div> 
     <div class="side_box_content"></div> 
    </div> 
</div> 
<div id="content_wrapper"> 
    <div id="content_wrapper_middle"> 
     <%content%> 
    </div> 
    <div id="content_wrapper_bottom"> 
     <div id="footer"></div> 
    </div> 
</div>

CSS

#navbar { 
    height: 30px; 
} 


.navbar_item { 
    float: left; 
    padding-top: 5px; 
    padding-left: 10px; 
    padding-right: 10px; 
} 

#sidebar { 
    max-width: 200px; 
    margin-top: 1%; 
    margin-left: 1%; 
    float: left; 
} 

#content_wrapper { 
    margin-left: 230px; 
    margin-right: 25px; 
    margin-top: 1%; 
}

источник

2013-10-10 NullBy7e

Ваша проблема лежит на ваших измерениях. Вы используете некоторые поля в %, некоторые в px, а также ширину в px. В какой-то момент 1% + 200px будет больше, чем поле 230px, которое у вас есть для вашего #content_wrapper. Почему это блок без ширины? И почему бы не заставить их всех использовать %, если вы хотите откликнуться на сайт?

источник

2013-10-11 00:08:59

Я установил его с ясным: оба; ниже навигационной панели, но последний элемент все еще ломается, а высота навигатора не увеличивается. Редактировать: все исправлено, нужно было оставить маржу слева в процентах. – NullBy7e

Вам нужно установить 'overflow: auto;' на ваш '# navbar_items'. –

это содержание navbar перетекания, что приводит к левой плавал sidebar, чтобы «поймать» переполнение и перепрыгнуть. Создание navbar, способного обрабатывать увеличенную высоту, или скрыть переполнение (менее желательно), исправит это.

источник

2013-10-10 23:57:54

Я добавил min-height: 30px; на #navbar, и он все еще делает то же самое. Похоже, навигатор отказывается увеличивать высоту, даже если установить высоту: 60 пикселей; решает все. – NullBy7e

60px блокирует его до этой высоты, и когда общая ширина элементов, расположенных слева, превышает ширину, которую вы разрешили для навигатора, она выливается в область содержимого. Остановите плавание nav, и панель будет увеличиваться по высоте, когда это необходимо. –

Floating Div Breaks on Zoom

ответ

Смежные вопросы