CODEWITHSUNDEEP
css
aaronstacy
aaronstacy

Reputation: 6428

Using `box-sizing: border-box` with `inline-block` elements

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.

Upvotes: 3

Views: 4672

Answers (1)

Madara&#39;s Ghost
Madara&#39;s Ghost

Reputation: 174967

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

Upvotes: 3

Related Questions