Hi,
i have this page:
http://www.tirengarfio.com/web/frontend_dev.php/miembros
login: fer
password: m
As you can see there is a filter. As you can see there is a widget below the word “de”.
How can i put that widget on the right of “de” instead of below?
This is my .css:
#item_filtro_edad_desde{
float: left;
}
#edad_desde_etiqueta{
float: left;
}
#edad_hasta_etiqueta{
float: left;
}
Regards
Javi
Hi, when I go there I get redirected to a page that has this
ok
Symfony Project Created
Congratulations! You have successfully created your symfony project.
There isn’t a “de” word, nor is there a widget. Or anything like that 
After that you are able to visit the link i pasted in my first post.
Hi, if I’m understanding you right you just want the text to read out “Edadde”?
You can float “#edad”. THe float must come first in the HTML
I don’t know which text you want where but you need to clear some consecutive floats so they don’t appear on the same line as a previous label. You seem to be using a lot of <div>'s there in the form which doesn’t seem to be needed :).
Hi, no :).
“Edad” means “Age”
“de” means “from”
“a” means “to”
It serves to filter people by their age.
What i have now (schematically) is
de - a -widget B
widget A
What i want is putting the 4 elements in a row:
de - widget A - a - widget B.
Do you understand now?
Javi
Hi,
As Ryan said those elements are a bit over-cooked with all those divs, ids and classes.
If you hadn’t wrapped all the labels, inputs and text in divs they would have lined up automatically in most cases (or perhaps if you had used spans instead).
As it is you will need to something rather complex like this now:
.row #edad,
.row #item_filtro_edad_hasta,
.row #item_filtro_edad_desde,
.row .widget,
.row .error{float:left;margin:0 5px}
.row{clear:both;overflow:hidden;margin:0 0 0 -5px;width:100%}
[B]<div class="row">[/B]
<div id="edad">Edad</div>
<div id="item_filtro_edad_desde">
<div class="etiqueta" id="edad_desde_etiqueta">
<label for="usuario_filters_edad_desde">de</label>
</div>
<div class="error" id="edad_desde_error"> </div>
<div class="widget" id="edad_desde_widget">
<select name="usuario_filters[edad_desde]" id="usuario_filters_edad_desde">
<option value="" selected="selected">-</option>
<optgroup label="0">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
<option value="6">7</option>
<option value="7">8</option>
<option value="8">9</option>
<option value="9">10</option>
<option value="10">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="20">21</option>
<option value="21">22</option>
<option value="22">23</option>
<option value="23">24</option>
<option value="24">25</option>
<option value="25">26</option>
<option value="26">27</option>
<option value="27">28</option>
<option value="28">29</option>
<option value="29">30</option>
<option value="30">31</option>
<option value="31">32</option>
<option value="32">33</option>
<option value="33">34</option>
<option value="34">35</option>
<option value="35">36</option>
<option value="36">37</option>
<option value="37">38</option>
<option value="38">39</option>
<option value="39">40</option>
<option value="40">41</option>
<option value="41">42</option>
<option value="42">43</option>
<option value="43">44</option>
<option value="44">45</option>
<option value="45">46</option>
<option value="46">47</option>
<option value="47">48</option>
<option value="48">49</option>
<option value="49">50</option>
<option value="50">51</option>
<option value="51">52</option>
<option value="52">53</option>
<option value="53">54</option>
<option value="54">55</option>
<option value="55">56</option>
<option value="56">57</option>
<option value="57">58</option>
<option value="58">59</option>
<option value="59">60</option>
<option value="60">61</option>
<option value="61">62</option>
<option value="62">63</option>
<option value="63">64</option>
<option value="64">65</option>
<option value="65">66</option>
<option value="66">67</option>
<option value="67">68</option>
<option value="68">69</option>
<option value="69">70</option>
<option value="70">71</option>
<option value="71">72</option>
<option value="72">73</option>
<option value="73">74</option>
<option value="74">75</option>
<option value="75">76</option>
<option value="76">77</option>
<option value="77">78</option>
<option value="78">79</option>
<option value="79">80</option>
<option value="80">81</option>
<option value="81">82</option>
<option value="82">83</option>
<option value="83">84</option>
<option value="84">85</option>
<option value="85">86</option>
<option value="86">87</option>
<option value="87">88</option>
<option value="88">89</option>
<option value="89">90</option>
<option value="90">91</option>
<option value="91">92</option>
<option value="92">93</option>
<option value="93">94</option>
<option value="94">95</option>
<option value="95">96</option>
<option value="96">97</option>
<option value="97">98</option>
<option value="98">99</option>
<option value="99">100</option>
<option value="100">101</option>
<option value="101">102</option>
<option value="102">103</option>
<option value="103">104</option>
<option value="104">105</option>
<option value="105">106</option>
<option value="106">107</option>
<option value="107">108</option>
<option value="108">109</option>
<option value="109">110</option>
<option value="110">111</option>
<option value="111">112</option>
<option value="112">113</option>
<option value="113">114</option>
<option value="114">115</option>
<option value="115">116</option>
<option value="116">117</option>
<option value="117">118</option>
<option value="118">119</option>
<option value="119">120</option>
<option value="120">121</option>
<option value="121">122</option>
<option value="122">123</option>
<option value="123">124</option>
<option value="124">125</option>
<option value="125">126</option>
<option value="126">127</option>
<option value="127">128</option>
<option value="128">129</option>
<option value="129">130</option>
</optgroup>
</select>
</div>
</div>
<div id="item_filtro_edad_hasta">
<div class="etiqueta" id="edad_hasta_etiqueta">
<label for="usuario_filters_edad_hasta">a</label>
</div>
<div class="error" id="edad_hasta_error"> </div>
<div class="widget" id="edad_hasta_widget">
<select name="usuario_filters[edad_hasta]" id="usuario_filters_edad_hasta">
<option value="" selected="selected">-</option>
<optgroup label="0">
<option value="0">1</option>
<option value="1">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="5">6</option>
<option value="6">7</option>
<option value="7">8</option>
<option value="8">9</option>
<option value="9">10</option>
<option value="10">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="20">21</option>
<option value="21">22</option>
<option value="22">23</option>
<option value="23">24</option>
<option value="24">25</option>
<option value="25">26</option>
<option value="26">27</option>
<option value="27">28</option>
<option value="28">29</option>
<option value="29">30</option>
<option value="30">31</option>
<option value="31">32</option>
<option value="32">33</option>
<option value="33">34</option>
<option value="34">35</option>
<option value="35">36</option>
<option value="36">37</option>
<option value="37">38</option>
<option value="38">39</option>
<option value="39">40</option>
<option value="40">41</option>
<option value="41">42</option>
<option value="42">43</option>
<option value="43">44</option>
<option value="44">45</option>
<option value="45">46</option>
<option value="46">47</option>
<option value="47">48</option>
<option value="48">49</option>
<option value="49">50</option>
<option value="50">51</option>
<option value="51">52</option>
<option value="52">53</option>
<option value="53">54</option>
<option value="54">55</option>
<option value="55">56</option>
<option value="56">57</option>
<option value="57">58</option>
<option value="58">59</option>
<option value="59">60</option>
<option value="60">61</option>
<option value="61">62</option>
<option value="62">63</option>
<option value="63">64</option>
<option value="64">65</option>
<option value="65">66</option>
<option value="66">67</option>
<option value="67">68</option>
<option value="68">69</option>
<option value="69">70</option>
<option value="70">71</option>
<option value="71">72</option>
<option value="72">73</option>
<option value="73">74</option>
<option value="74">75</option>
<option value="75">76</option>
<option value="76">77</option>
<option value="77">78</option>
<option value="78">79</option>
<option value="79">80</option>
<option value="80">81</option>
<option value="81">82</option>
<option value="82">83</option>
<option value="83">84</option>
<option value="84">85</option>
<option value="85">86</option>
<option value="86">87</option>
<option value="87">88</option>
<option value="88">89</option>
<option value="89">90</option>
<option value="90">91</option>
<option value="91">92</option>
<option value="92">93</option>
<option value="93">94</option>
<option value="94">95</option>
<option value="95">96</option>
<option value="96">97</option>
<option value="97">98</option>
<option value="98">99</option>
<option value="99">100</option>
<option value="100">101</option>
<option value="101">102</option>
<option value="102">103</option>
<option value="103">104</option>
<option value="104">105</option>
<option value="105">106</option>
<option value="106">107</option>
<option value="107">108</option>
<option value="108">109</option>
<option value="109">110</option>
<option value="110">111</option>
<option value="111">112</option>
<option value="112">113</option>
<option value="113">114</option>
<option value="114">115</option>
<option value="115">116</option>
<option value="116">117</option>
<option value="117">118</option>
<option value="118">119</option>
<option value="119">120</option>
<option value="120">121</option>
<option value="121">122</option>
<option value="122">123</option>
<option value="123">124</option>
<option value="124">125</option>
<option value="125">126</option>
<option value="126">127</option>
<option value="127">128</option>
<option value="128">129</option>
<option value="129">130</option>
</optgroup>
</select>
</div>
</div>
[B]</div>
[/B]
Thanks, i removed the divs and it works ok, but why?
Divs are block level elements and will start on a new line because they introduce a carriage return. Inputs and labels (and spans and anchors etc) are inline elements and will just carry on the same line like text would until they get to the end of the line.