How can I use CSS borders to visually group my sections?

Question

I'm trying to use css borders to visually group my sections, but the border that is drawn for my second section encompasses the first, so it looks horrible. How can I make the borders right.

My code:

My first div is float left, and its border shows up correctly, encompassing only the area it needs. It has mostly input elements down the left side of the page.

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

My second div also is mostly textboxes and labels, and it has this div declaration:

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

Unfortunately, I must be missing something about the css box model as this border goes all the way to the left and encompasses the other div. I'm trying to just have two boxes that encompass each div so that there is some visual seperation and grouping. If I have to use something other than borders that's ok too.

Answer 1

Add the float:left to the second DIV as well - they will still appear side-by-side if there is sufficient width, but the space for the first won't be left "inside" the second, which is what you see at the moment.

Answer 2

First set a width to your divs, so that they no longer go over the whole page. (try width: 50% for a start)

Then use margin (or margin-left/top/bottom/right) to assign margins to your divs as needed. That way the borders no longer collapse.

Answer 3

Hi,

You can achive this by using "fieldset" tag easily. This way you can have the heading for different groups by using "legend" tag.