Ошибка ширины строки inline-блока CSS

Question

У меня есть страница с контейнером div, этот контейнер div имеет два столбца, как встроенные блоки. Один столбец (левая сторона (LHS)) - выбор тикбокса для каталога покупок, правый столбец - результат выбранного выбора.

Проблема у меня в том, что каждому присваивается ширина, основанная на проценте от ширины родителя, левый фиксированный столбец - 20%, правый, выходной столбец - 79% (я имею тенденцию разрешать 1% для изменчивость). НО: левому столбцу требуется минимальная ширина - определяется в px как 155px; Столбец с правой стороны (RHS) заполняется встроенными блоками для каждого продукта, отображаемого при поиске по каталогу. Эти блоки фиксированной ширины (140px)

МОЙ ВОПРОС: При загрузке страницы на моем экране это хорошо, но когда:

LHS: мин-ширина: 155px < ширина: 20%

(в окне браузера изменяется)

Все с правой стороны падает ниже содержания с левой стороны (как ширина для него меньше, чем требуется 79%.

некоторых простой пример: Обратите внимание, что при измерении ширины нет границ или прокладок.

HTML:

<div id="container"> 
    <div class="leftsideMenu">Menu column.</div> 
    <div class="rightsideShop">Shop Contents</div> 
</div> 

CSS:

#container{ 
    width:80% /* of screen */ 
    min-width:555px; /*should leave 400px for shop contents */ 
} 

.leftsideMenu { 
    display:inline-block; 
    width:20%; 
    min-width:155px; 
    vertical-align:top; 
} 

.rightsideShop{ 
    display:inline-block; 
    width:79%; 
    max-width:calc(100% - 156px) !important; /* fix attempt - doesn't appear to work */ 
    vertical-align:top; 
} 

[Некоторый] Попытанный FIXES (не в порядке попытки):

1) Calc, чтобы сделать максимальную ширину всегда меньше чем 100% -155, не работает

2) Поплавки и поля: это действительно работает, но представляет собой про что клиент не хочет, чтобы обувь под колонкой LHS и высота поплавка = 100% родительская - это еще одна проблема,

3) Я также попытался использовать https://stackoverflow.com/a/6350781/3536236 ответ на аналогичный вопрос - с подходом относительный RHS и использование принудительного запаса LHS, но это не сработает, так как в этом случае для меня не работало решение, связанное с этим.

4) Я считаю, что работа в гибкой коробке - это, вероятно, лучший способ продвижения вперед, но я не знаю об этом достаточно, и, чтобы быть грубым честным, я надеялся избежать массированной переделки страницы CSS. (Я изначально ожидал, что эта проблема будет 30 минут!).

5) Не устанавливая ширину (только максимальную ширину) для RHS - для автоматической заданной ширины, это значение auto определяет 100% и идет под столбцом левой стороны.

Я думаю, что ответ довольно прост, но я не могу видеть его :(.

Объяснить части для вышеупомянутых пунктов, LHS был первоначально поплавком и работало хорошо, но клиент хочет нет продуктов, появляясь под меню в колонке LHS, поэтому я подумал - просто, сделайте его встроенным блоком ....

Любая помощь в том, чтобы держать правую сторону в левой части пространства, в котором она нуждается, даже на экране изменение размера?

............

ОН ДЛЯ FFFFFFFF БЛАГО - Я только что написал это всех, и в то время как я пишу это пытаются различные идеи, как они» и это, наконец, сработало:

Теперь, после всех этих усилий для написания этого, я хочу опубликовать его в любом случае, но решение ниже!

Answer 1

ОН ДЛЯ FFFFFFFF БЛАГО - Я только что написал это всех, и в то время как я пишу это пытаются различные идеи, как они произошли, и это, наконец, работал:

По какой-то причине мой известково работает с:

max-width:calc(100% - 160px); Giving a spare space of 5px . 

Любые идеи, почему это так, как я говорю, в контейнере DIV стандартные ширины в процентах и ​​есть некоторые обивка в контейнере продукта (инлайн-блоки) внутри РИТ, но это на самом деле не должны были влиять на добавление большего количества пробелов в методе calc.

В любом случае, он работает сейчас. Я счастлив. Может быть, это поможет кому-то?

Answer 2

С встроенным блоком у вас будет пробел, занимающий некоторое пространство в вашем макете.

Два встроенных блока div с шириной 400 пикселей в контейнере div 800px не всегда будут отображаться рядом друг с другом.

Вы можете исправить это, убедившись, что закрывающий тег элемента находится непосредственно рядом с открывающим тегом следующего элемента в HTML (например, </div><div>, никаких новых строк или пробелов).

Лучшим вариантом является применение font-size: 0 к содержащему элементу, а затем сброс font-size, например. 1rem для элементов встроенного блока.