divs not properly aligned side by side - css

Question

I have 3 divs placed side by side in my application , and after the divs , I have kept a submit button.
This is how the Submit button looks if I select 'today' in date options :
but if I choose specific dates , this is what happens :
This is how the code looks like :
<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 " " 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>
Now the styles :
.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;
}
I added style="float:left" to the outermost div , but this problem persists . What's the exact solution would be?

Answer 1

To me it looks like on the bottom image two images are appearing next to the date boxes and this is causing the elements to be to wide for the containing div.
Try resizing some of the elements to make them smaller by 20-30px or; make the containing divisions width bigger, this should hopefully work.

Answer 2

instead float you can use display:inline-block for this with white-space property. Like this:
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/