Правая колонка переноситься в низ?

Question

[Muslim Mamaev]

Здравствуйте! При уменьшение окошко браузера Правая колонка переноситься в низ на новую строку.как запретить это с помощи css

Comments

[Ankhena]

Знать бы что у вас в коде...
Желательно код в песочницу jsfiddle.net или codepen.io

Например, можно начать с указания ширины правому блоку через calc(100% - (ширина левого + отступы))

[Muslim Mamaev]

Ankhena, .content {
margin-top: 15px;
position:relative;
}
.head {
height:90px;
background: #ef6565;
color: #fff;
font: 16px Oswald;
display: block;
}
.title {
background: #ef6565;
padding: 10px 12px;
text-transform: uppercase;
color: #ffffff;
display: block;
overflow: hidden;
position: sticky;
font-size: 12px;
font-weight: 700;
}

#left_kolonka {
position:relative;
width:20%;
height:500px;
background:#f1f1f1;
float:left;
padding: 0 15px 15px 0;
text-align:left;
padding: 10px;
color: #000;
}

#center_kolonka{
position:relative;
color: #000;
width:76%;
height:500px;
background:#f1f1f1;
float:right;
padding: 0 10px 10px 0;
text-align:left;
padding: 10px;
}

#right_kolonka {
color: #000;
width:20%;
height:500px;
background:#f1f1f1;
float:left;
margin: 0 15px 15px 0;
text-align:left;
padding: 10px;
}



Меню пользователя
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка
Левая колонка

Меню пользователя
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка
Центральная колонка Центральная колонка Центральная колонка

.foot {
background: #494949;
padding: 10px;
color: #adadad;
font: 14px Oswald;
}

[Rustam Bainazarov]

Muslim Mamaev, не смешно.

Выложите это на www.jsfiddle.net.

[Ankhena]

Muslim Mamaev,
1. Переходите на flex html5book.ru/css3-flexbox
2. используйте calc, как я написала выше
3. используйте box-sizing: border-box

И зачем они все relative?

Answer 1

[Developer]

tsya.ru

Comments

[lagudal]

Muslim Mamaev @muslim_mamaev
Новичок изучаю css

Не написано, что "собираюсь учить русский язык" ))

[Developer]

lagudal, проблемы индейцев шерифа не волнуют

Answer 2

[Максим]

Не влезает потому что ...
Очевидно используете float

Answer 3

[Freecreate]

Задать обоим колонкам float:left; И ширину в %. Для левой 20% например, для правой 80% (или 30% и 70%).
.left_col, .right_col{
float:left;
}
.left_col{
width: 30%;
}
.right_col{
width: 70%;
}

Answer 4

[Ankhena]

Muslim Mamaev,
Дело в том, что суммарная ширина у вас выходит: 20% + 76% + 15px + 10px = 96% + 25px.
А потом вы уменьшаете экран и 25точек оказываются больше, чем оставшиеся свободные 4%.

Флоатами сейчас никто такую раскладку блоков не верстает.

На флексах примерно так: https://jsfiddle.net/vwojq8c3/

это заодно решит и ваш следующий вопрос "как сделать блоки одинаковой высоты" ;)

Альтернативы:
- Использовать способ расчета ширины box-sizing: border-box, тогда паддинги будут включены внутрь width. Тогда width можно писать 20% и 80%
- Вместо padding использовать margin в %.(у вас 4% на это остается)
- Для ширины основного блока использовать calc(80% - 25px) Если еще границы, то их толщину тоже надо учесть.

Answer 5

[Muslim Mamaev]

Всем спасибо! box-sizing: border-box; помог мне