Question

I have two fieldsets (as below) that are inside a div. They have been style inline and 50% width. In my head I think they should display on the same line but (at least in chrome, haven’t checked IE or ff) the second one wraps to the next line.

I have a twofold question:

1. Why oh why oh why!?
2. Is there an easy fix for this? (other than maybe setting them to be 49.8% width)?

http://jsfiddle.net/z22KR/2/

*
{
    box-sizing: border-box;
}
fieldset
{
    margin: 0px;
    border: 0px;
    padding: 0px;
    display: inline-block;
    width: 50%;
    background-color: grey;
}

div
{
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: green;
}

div div
{
    background-color: red;
}

<div>
    <fieldset>1</fieldset>
    <fieldset>2</fieldset>
    <div>div</div>
</div>

Edit I changed inline to inline-block as I intended. Sorry for the confusion there.

Edit2 Also would rather not do any floating if at all possible.

Edit3
My html looks more like

<div class="twoChildren">
    <fieldset id="fieldset1"><legend>Fieldset 1</legend>
        <div id="listofStuff1">
            <table>
            ...
            </table>
        </div>
    </fieldset>
    <fieldset id="fieldset2"><legend>Fieldset 2</legend>
        <div id="listofStuff2">
            <table>
            ...
            </table>
        </div>
    </fieldset>
</div>

Answer 1

There are many mistakes in your css, please study and write logically. btw do you want like this??

DEMO

EDIT

I find below things are not Good practice, please correct me if i am wrong

• Using div div {} is misleading, better use class and id selector
• also optimize your css , when you always need margin ,padding and border to 0px then why dont you write on the top with *{}
• and also set the css in the order your elements are in the DOM, you first declare css for fieldeset then set css rule for div

@James Valid CSS is another issue and optimize CSS is another