Как использовать границы CSS для визуальной группировки моих разделов?

Question

Я пытаюсь использовать границы css для визуальной группировки моих разделов, но граница, которая нарисована для моего второго раздела, включает в себя первую, поэтому выглядит ужасно. Как я могу сделать границы правильными.

Мой код:

Мой первый DIV находится поплавок слева, а его граница показывает правильно, охватывая только область он нуждается. Он имеет в основном элементы ввода в левой части страницы.

<div style="float: left; margin-right: 40px; border-width: medium; 
border-color: Black; border-style: solid"> 

Моего второй ДИВ также в основном текстовые поля и меток, и она имеет это Div заявление:

<div style="border-width: medium; border-color: Black; 
border-style:solid"> 

К сожалению, я должен отсутствовать кой-что о модели блочной, как эта граница проходит весь путь влево и охватывает другой div. Я пытаюсь просто иметь две коробки, которые охватывают каждый div, чтобы было какое-то визуальное разделение и группировка. Если мне нужно использовать что-то другое, кроме границ, это тоже нормально.

Answer 1

Добавить float: слева и во второй DIV - они все равно будут отображаться бок о бок, если имеется достаточная ширина, но пространство для первого не останется «внутри» второго, что что вы видите на данный момент.

Answer 2

Сначала установите ширину на div, чтобы они больше не переходили по всей странице. (Попробуйте width: 50% для начала)

Затем используйте margin (или margin-left/top/bottom/right) для назначения полей для ваших div с по мере необходимости. Таким образом, границы больше не разрушаются.

Answer 3

Вы можете добиться этого, используя ярлык «fieldset». Таким образом, вы можете иметь заголовок для разных групп, используя тег «legend».