Наплыв блоков с фиксированной шириной элементов

@Hakken · Регистрация: 13.11.2015

Author24 — интернет-сервис помощи студентам

Добрый день.
Не давно начал осваивать Html и Css.
Решил на работе сверстать страницу для удобства перехода по внутренним мониторингам.
Проблема заключается в том, что при сворачивании браузера один блок "залазит" на другой, а хотелось бы что бы он просто смешался в низ. (или при сворачивании фиксированная ширина кнопок уменьшалась бы)
Это происходит из-за того что кнопки внутри блоков с фиксированной шириной(хочу что бы они были одинакового размера), если задать в % то "наплывов" нет, но тогда меня не устраивает вид в полно экранном режиме.
Во вложении скрины.
Код HTML для форума уменьшил для удобства, оставил по 2 кнопки в блоке.
Буду признателен, если поможете или укажите путь размышлений =)
Спасибо.

HTML5

<div class= "head">
    <span >Мониторинги и вспомогательное ПО Филиала Центральный</span>
    </div>
    
    <div class = "box" >
    <form action="1" target="_blank">
                    <button class="button button--winona button--border-thin button--text-thick button--inverted" data-text="Система мониторинга загрузки каналов связи Cacti"><span>Система мониторинга загрузки каналов связи Cacti</span></button>
    </form><p>
    <form action="1" target="_blank">
                    <button class="button button--winona button--border-thin button--text-thick button--inverted" data-text="Система мониторинга качества каналов связи Nagios"><span>Система мониторинга качества каналов связи Nagios</span></button>
    </form>
    </div>
    <div class = "box1">
    <form action="1" target="_blank">
                    <button class="button button--winona button--border-thin button--text-thick button--inverted" data-text="Карта филиала Центральный"><span>Карта филиала Центральный</span></button>
    </form>
    <form action="1" target="_blank">
                    <button class="button button--winona button--border-thin button--text-thick button--inverted" data-text="Отчет о проведённых профилактиках ТТ"><span>Отчет о проведённых профилактиках ТТ</span></button>
    </form>
    </div>

CSS

.button {
    float: left;
    width:500px;
    display: block;
    margin: 1em;
    padding: 1em 2em;
    padding-top: 1px;
    border: none;
    margin-bottom:1px;
    background: none;
    color: inherit;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}
.button:focus {
    outline: none;
}
.button > span {
    vertical-align: middle;
}

CSS

.box {
    padding-top: 1px;
    padding-left: 5em;
    width: 50%;
    float: left;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
}
.box1 {
    padding-top: 1px;
    padding-right:5em;
    float: left;
    width: 50%;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
}
 
.head {
 
height:30px;
text-align: center;
background: none;
color: inherit;
vertical-align: middle;
font-weight: bold;
background: #BFCACF;   
    
}

@Fedor92 · 13.11.2015, 13:39

Hakken, по хорошему Вам лучше бы это всё переверстать... Я бы использовал таблицу, пожалуй...

@Hakken · 13.11.2015, 17:43 **[ТС]**

Переверстал. Не то что хотел, но на много лучше.
Подскажите еще, для общего развития. Свойство "clear" запрещает "обтекание". Возможно ли реализовать так, что бы если страница на весь экран это свойство не работает, если страница свернута, работает.
Т.е. получается блок бы смещался автоматом при сворачивании.
Или такое реализуется только в JS?
Простите за мои извращены представления о верстке =)

@Fedor92 · 13.11.2015, 18:13

Hakken, я так понимаю Вы имеете ввиду разные разрешения...

Как вариант на html можно попробовать реализовать подобное с помощью медиазапросов, то есть в зависимости от разрешения применять те или иные свойства к объектам на странице...

@Fedor92 2964 / 2618 / 1068 Регистрация: 15.12.2012 Сообщений: 10,061 Записей в блоге: 11
	13.11.2015, 13:39	2
	Hakken, по хорошему Вам лучше бы это всё переверстать... Я бы использовал таблицу, пожалуй... 1

@Hakken 0 / 0 / 0 Регистрация: 13.11.2015 Сообщений: 2
	13.11.2015, 17:43 [ТС]	3
	Переверстал. Не то что хотел, но на много лучше. Подскажите еще, для общего развития. Свойство "clear" запрещает "обтекание". Возможно ли реализовать так, что бы если страница на весь экран это свойство не работает, если страница свернута, работает. Т.е. получается блок бы смещался автоматом при сворачивании. Или такое реализуется только в JS? Простите за мои извращены представления о верстке =) 0

@Fedor92 2964 / 2618 / 1068 Регистрация: 15.12.2012 Сообщений: 10,061 Записей в блоге: 11
	13.11.2015, 18:13	4
	Hakken, я так понимаю Вы имеете ввиду разные разрешения... Как вариант на html можно попробовать реализовать подобное с помощью медиазапросов, то есть в зависимости от разрешения применять те или иные свойства к объектам на странице... 0