Question

i am trying to get “prod_line_fields” and “look_for_fields” on separate lines floating to the left (other html reasons in my page), and then im trying to get “add_field” to be on the same line as the respectful input element. i tried playing with display inline and stuff however i couldn’t not figure it out.

CSS

#building_infoer_hld{
    float:left;
    display:inline;
    margin:15px 0 0 0;
    width:725px;
}

.add_field{
    width:135px;
    height:24px;
    cursor:pointer;
}


#prod_line_fields{
    margin:10px 0 0 0;
}
.prod_line_inpt{
    width:133px;
    height:22px;
    margin:0 5px 10px 0;
    padding:0 0 0 6px;
    border:#2B4754 1px solid;
}

#look_for_fields{
    margin:10px 0 0 0;
}
.look_for_inpt{
    width:133px;
    height:22px;
    margin:0 5px 10px 0;
    padding:0 0 0 6px;
    border:#2B4754 1px solid;
}

HTML

<div id="building_infoer_hld">
    <div id='title_field'>
        <input class="input_title" name="niche_title" type="text" value="Sample Text" />
    </div>
    <div id='prod_line_fields'>
        <input type="text" class="prod_line_inpt" id="prod_line_0" name="product_line[]" /><div id="add_prod_line" class="add_field"></div>
    </div>
    <div id='look_for_fields'>
        <input type="text" class="look_for_inpt" id="look_for_0" name="look_for[]" /><div id="add_look_for" class="add_field"></div>
    </div>
</div>

Answer 1

Try this styles

.add_field{
    width:135px;
    height:24px;
    cursor:pointer;
    float:left;
}

Float added here also add float for these

.prod_line_inpt,.look_for_inpt
{ float:left;
}
#look_for_fields{
    margin:10px 0 0 0;
    clear:left;
}

check this http://jsfiddle.net/tDjzR/6/

Result is here
http://jsfiddle.net/tDjzR/6/embedded/result/