CSS Div problem. Aligning side by side.

[TechBoyJK]

Hi Guys,

I'm working on a form, and for the life of me, I can't get these divs to sit side by side.

You can see the test page at www.details.at/search_test.cfm

It's a small form with a few fields and selects

I want each element to sit side by side in a single row.

Here is the code. I thought display:inline; would do the trick, but it's not working.



<style>
#control_panel
{
padding:0 0 1em 2em;
width:600px;
float:left;
}

.smalltext
{
font-family: arial, helvetica, sans-serif;
color: #000000;
font-size: .7em;
}

.input
{
font: .9em Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #146eb4;
border: 1px solid #146eb4;
}

label
{
text-align: left;
display: block;
}

div.search_container
{
display: block;
}


div.search_cell
{
display: inline;
}


</style>


<div id="control_panel">

<form action="http://test.at" METHOD="post">

<div class="search_container">

<div class="search_cell">
<INPUT class="input" NAME="search_box" value="" size="25" maxlength="200">
<label for="search_box"><span class="smalltext">search</span></label>
</div>

<div class="search_cell">
<select class="input" name="range">
<option value="50">50</option>
<option value="Any">Any</option>
<option value="1" >1</option>
</select>
<label for="search_box"><span class="smalltext">within</span></label>
</div>

<div class="search_cell">
<select class="input" name="range_measure">
<option value="Miles">Miles</option>
<option value="kilometers">Kilometers</option>
</select>
<label for="search_box"><span class="smalltext">range</span></label>
</div>

<div class="search_cell">
<span class="smalltext">of</span>
</div>

<div class="search_cell">
<INPUT class="input" value="" type="Text" name="location" size="10">
<label for="location"><span class="smalltext">city & state or postal</span></label>
</div>

<div class="search_cell">
<INPUT class="input" type="submit" name="Submit" value="Go">
</div>

</form>

</div>

</div>

 

[PhatoseAlpha]

Use float:left instead.

You can also use display:inline-block, but that won't function properly in ie7 or lower.

 

[speg]

Try inline-block, or just put them in a table?

 

[TechBoyJK]

ok thanks guys i got it