Question

This seems very basic, but all the Google search’s aren’t helping me especially with a containing div. Basically, I want two sections (either div’s or preferably fieldsets’s) on my page to be placed within a containing section, both be equally sized horizontally regardless of page width, placed side by side, and resize proportionally when the page is resized. One caveat is that that the containing section can have padding (such is the case with using fieldset), so the sub-containers need to be 50% of the base container’s available width. Here’s an example of my sections. Any suggestions are appreciated!

<fieldset>
  <legend>Contact Information</legend>
  <fieldset class="homeAddress">
    <legend>Home Address</legend>
    Address: 123 Main St.
  </fieldset>
  <fieldset class="workAddress">
    <legend>Work Address</legend>
    Address: 456 Second St.
  </fieldset>
</fieldset>

Answer 1

If you don’t want to use box-sizing: border-box as thirtydot suggested (which I agree is the easiest solution), you could simply wrap your fieldsets in a couple divs, and set those to 50% width. Then you can apply whatever padding/styles you want to the inner fieldsets without having to worry about it affecting the 50% width.

Example: http://jsfiddle.net/VQrYD/1/

The benefit is that you don’t need to worry about browser support for the box-sizing CSS property.