CODEWITHSUNDEEP
css
bigmac
bigmac

Reputation: 2553

CSS - Size Two Divs Equally Side by Side within Containing Div

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>

Upvotes: 1

Views: 9897

Answers (3)

thirtydot
thirtydot

Reputation: 228152

box-sizing: border-box is the best way to do this. It changes the width and height to include the padding and border.

See: http://jsfiddle.net/thirtydot/FtBc4/2/

fieldset > fieldset {
    float: left;
    width: 50%;
    padding: 10px;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    border: 1px solid red;
}

The browser support is very good. The only unsupported browser that you might care about is IE7.

If you need to support IE7, then you can instead add some wrapper divs, like this.

Upvotes: 4

justisb
justisb

Reputation: 7270

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.

Upvotes: 4

Gilsham
Gilsham

Reputation: 2276

just use

width:50% (or a litte less if you want a gap or are using a border)
float:left

example http://jsfiddle.net/CQ9uU/

Upvotes: 0

Related Questions