Using `box-sizing: border-box` with `inline-block` elements
css
Solution
That's quite a common problem.
Adding an `overflow` value on the container, will have the browser to recalculate the container's dimensions despite it have no not-floated elements.
.container { overflow: hidden; }
Before and After
Problem
I'd like to use the `box-sizing: border-box` CSS property to split a form into a left and right half: ``` <form class=container> <fieldset class=left> <label>Description</label> <textarea name=description></textarea> </fieldset> <fieldset class=right> <label>Name</label> <input type=text name=name /> </fieldset> </form> ``` In order to make this work, I need to float both `<fieldset>` elements to the left: ``` .left, .right { width: 50%; margin-left: 0px; marign-right: 0px; box-sizing: border-box; float: left; } ``` The problem is of course that since the `<fieldset>`'s are floated, they are no longer in-flow, and the `<form>` element gets a height of 0 (unless i add a clearfix or something). If I remove the float property and change their display to `inline-block`, they're back in flow, but they no longer line-up next to eachother. Is there some way to use `border-box` here without needing to add a clearfix element (or `:after` pseudo element)? For reference, here's a fiddle that uses floats, and here's a fiddle that uses inline-block.