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

Question

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

Мой код:

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

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

Мой второй div также в основном содержит текстовые поля и метки, и у него есть это объявление div:

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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