• Resolved feelingfoxy7

    (@feelingfoxy7)


    The collapsing problem is now solved, but now I can’t get the pieces of the widget to spread out. I want to spread out the labels and divs vertically, but it’s not responding.

    I’ve tried changing the size of the form container, adding margins and padding to each individual div and label inline, trying to style the css with margins and padding for each one, with no effect.

    You can see the website here: https://www.christiangallegorealestate.com . It’s in the right sidebar, about halfway down the page, under ‘quick search’:

    This is my entire piece of html/css for that widget, as you can see it now:

    <style type="text/css">
    #IDX-quickSearchForm { position: relative; height: 370px; width: 130px;}
    #QS-minPriceField { position: absolute; width: 100px; height: 22px; left: 12px; top: 53px; padding: 15px;}
    #QS-maxPriceField { position: absolute; width: 100px; height: 22px; left: 12px; top: 103px; margin-top: 5px; }
    #QS-minSqftField { position: absolute; width: 100px; height: 22px; left: 12px; top: 153px;  margin-top: 5px;}
    #QS-minRoomsField { position: absolute; width: 100px; height: 22px; left: 12px; top: 203px; margin-top: 5px;}
    #QS-minBathsField { position: absolute; width: 100px; height: 22px; left: 12px; top: 253px; margin-top: 5px;}
    #QS-labelMaxPrice {position: absolute; width: 110px; height: 22px; left: 12px; top: 83px;  margin-top: 5px;}
    #QS-labelMinPrice {position: absolute; width: 110px; height: 22px; left: 12px; top: 33px;  margin-top: 5px;}
    #QS-labelMinSqft {position: absolute; width: 110px; height: 22px; left: 12px; top: 133px; margin-top: 5px;}
    #QS-labelMinRooms {position: absolute; width: 110px; height: 22px; left: 12px; top: 183px; margin-top: 5px;}
    #QS-labelMinBaths {position: absolute; width: 110px; height: 22px; left: 12px; top: 233px;  margin-top: 5px;}
    #QS-labelFormTitle {position: absolute; width: 110px; height: 22px; left: 23px; top: 10px;  margin-top: 5px;}
    #QS-labelCityList {position: absolute; width: 110px; height: 22px; left: 12px; top: 283px;  margin-top: 5px;}
    #QS-buttonSearch { position: absolute; width: 70px; height: 27px; left: 28px; top: 333px; margin-top: 5px; }
    #QS-selectCityList { position: absolute; width: 105px; height: 22px; left: 12px; top: 303px;}
    #backLink {position:absolute; top:370px;}
    </style>
    <div id="IDX-quickSearchForm">
    <form action="https://www.christiangallegorealestate.idxco.com/idx/17913/results.php" method="get">
    <input type="text" name="lp" id="QS-minPriceField" value="200000">
    <input type="text" name="hp" id="QS-maxPriceField" value="800000">
    <input type="text" name="sqFt" id="QS-minSqftField" value="0">
    <input type="text" name="bd" id="QS-minRoomsField" value="1">
    <input type="text" name="ba" id="QS-minBathsField" value="0">
    <div id="QS-labelMaxPrice">Max Price:</div>
    <div id="QS-labelMinPrice">Min Price:</div>
    <div id="QS-labelMinSqft">Min SQFT:</style></div>
    <div id="QS-labelMinRooms">Min Rooms:</div>
    <div id="QS-labelMinBaths">Min Baths:</div>
    <div id="QS-labelFormTitle">Quick Search</div>
    <div id="QS-labelCityList">Choose a City</div>
    <input id="QS-buttonSearch" type="submit" name="searchSubmit" value="Search" />
    <select id="QS-selectCityList" name="city[]" value="Quick Search" >
    <option value="1145">Anaheim</option>
    <option value="7264">Cardiff</option>
    <option value="7269">Cardiff by the Sea</option>
    <option value="7324">Carlsbad</option>
    <option value="11886">Del Mar</option>
    <option value="14668">Encinitas</option>
    <option value="26228">Leucadia</option>
    <option value="34097">Oceanside</option>
    <option value="34410">Olivenhain</option>
    <option value="35287">Palomar Mountain</option>
    <option value="37635">Poway</option>
    <option value="38403">Rancho California</option>
    <option value="38413">Rancho Santa Fe</option>
    <option value="41216">San Diego</option>
    <option value="41255">San Leandro</option>
    <option value="41267">San Marcos</option>
    <option value="49424">Vista</option>
    <option value="53016">Yucca Valley</option>
    </select>
    </form>
    </div>

    [Please post code or markup between backticks or use the code button. Or better still – use a pastebin. Your posted code may now have been permanently damaged/corrupted by the forum’s parser.]

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Help Spacing Divs Inside a Widget’ is closed to new replies.