divs неправильно выровнены бок о бок

Question

У меня есть 3 элемента div, помещенных рядом в моем приложении, и после элементов div я сохранил кнопку отправки.

Так выглядит кнопка Submit , если я выбираю 'параметры даты за сегодня:

, но если я выберу конкретные даты, это произойдет:

Вот как выглядит код:

<div class="filters clearfix" style="float:left" id="sel_filters">
    <div class="fields">
       <div class="10">
          <!-- this is for the date option . it contains a label and select element-->
       </div>
       <div>
          <!-- label for start date and an input box -->
       </div>
       <div>
          <!-- label for end date and an input box -->
       </div>
       <div>
          <!-- label for adnetwork options "&nbsp;" and the select element -->
       </div>
       <input id="startdate_hidden" type="hidden" style="display:none;" value="" name="data[Fam][startdate_hidden]">
        <input id="enddate_hidden" type="hidden" style="display:none;" value="" name="data[Fam][enddate_hidden]">
        <input id="submit" class="stdButton" type="submit" onclick="return  updateAddetailsNetworkWiseReport();" value="Submit" name="submit">
    </div>
</div>

Теперь стили:

.clearfix:after 
{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
div#sel_filters 
{
  margin-left: 10px;
  width: 754px;
}

div.filters div.fields 
{
  background: url("/img/bg_summary.gif") no-repeat scroll right bottom #FFFFFF;
  height: 38px;
  padding-right: 10px;
}
div#sel_filters div.fields div.l0 
{
  margin-left: 0;
}

Я добавил style = "float: left" к внешнему элементу div, но эта проблема сохраняется.Какое будет точное решение?

Answer 1

Мне кажется, что на нижнем изображении рядом с полями с датами появляются два изображения, и это приводит к тому, что элементы становятся широкими для содержащего элемента div.

Попробуйте изменить размеры некоторых элементов, чтобы уменьшить их на 20-30 пикселей или; увеличьте ширину содержащихся разделов, надеюсь, это сработает.

Answer 2

вместо float вы можете использовать display:inline-block для этого со свойством white-space. Как это:

CSS:

.parent{
    white-space:nowrap;
}
.child{
    background:red;
    margin:10px;
    width:150px;
    height:100px;
    white-space:normal;
    display:inline-block;
    *display:inline /*IE7*/
    *zoom:1;
}

HTML

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

http://jsfiddle.net/amhWX/