trying to use block and inline on select tags inside a form

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
deejay
Forum Contributor
Posts: 201
Joined: Wed Jan 22, 2003 3:33 am
Location: Cornwall

trying to use block and inline on select tags inside a form

Post by deejay »

Hi

I am building a form that has four select dropdowns. The first 2 are shorter (this works) and should sit next to other horizontally, and the other two on new rows. I seem to be able to do one or the other and not both. Heres the code i have

Code: Select all

 
<?php
 
?>
 
<style>
.search fieldset {
        clear: both;
    
    }
    .search fieldset label{
            color: #000;
                font-size: 1em;
                font-weight:bold;
                margin-bottom: .2em;
    }
    
        .search fieldset h4 {
            margin-left: 0;
        }
    
        .search fieldset select {
            display: block;
        }
    
    .search fieldset select .row {
            width: 10.25em;
            display: block;
        }
 
/*      */
 
        
        }
</style>
 
<div class="search">
    <fieldset>
        <h4>Search</h4>
        <label for="firstField" >1st Field</label>
        <select id="firstField" class="row">
            <option>Price (form)</option>
        </select>
        <select class="row">
            <option>Price (to)</option>
        </select>
   <label for="secondField">Second Field</label>
        <select class="normal">
            <option>options</option>
        </select>
        <select class="normal">
            <option>more options</option>
        </select>
    <div class="submit">
<a href="#">Submit</a>
                </div>
</fieldset>
</div>
 
I have tried to make an additional inline style and add that to the class I already have but can't seem to get it to work.

Code: Select all

 
<style>
.searchTargetPrice fieldset select .row .inline {
            display: inline;
}
 
</style>
<select class="row inline">
 
Any help would be gratefully recieved.
 
 
 
 
User avatar
nor0101
Forum Commoner
Posts: 53
Joined: Thu Jan 15, 2009 12:06 pm
Location: Wisconsin

Re: trying to use block and inline on select tags inside a form

Post by nor0101 »

You could try:

Code: Select all

 
#search select {
    float: left;
}
#search select.normal {
    clear: both;
}
 
As long as the width of the first two selects combined does not exceed the parent container width, this should take care of it.
Post Reply