SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Float inside of float

    Hi,

    i have this page:

    http://www.tirengarfio.com/web/front...v.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:

    Code:
    #item_filtro_edad_desde{
    	
    	float: left;
    	
    }
    
    #edad_desde_etiqueta{
    
    	float: left;
        	
    }
    
    #edad_hasta_etiqueta{
    
    	float: left;
        	
    }
    Regards

    Javi

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Hi, when I go there I get redirected to a page that has this
    After that you are able to visit the link i pasted in my first post.

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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 .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    .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&#37;}
    Code:
    <div class="row">
        <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>
    </div>
    

  7. #7
    SitePoint Enthusiast
    Join Date
    Dec 2009
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,
    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).
    Thanks, i removed the divs and it works ok, but why?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,298
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by tirengarfio View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •