html - Align content on left edge of page -
i having trouble placement. want make 's set links eventually, aesthetic purposes want border lines start @ left edge of page , go whole width of page. instead content lined 5-10px right of left edge, , when content set 100% width makes page have horizontal scroll bar. want fit on 1 page no scroll bars. appreciated!
html:
<input id="searchbar" type="search" placeholder="search" /> <div id="search" class="accommodation">accomodation<img class="arrowtwo" src="../images/arrow.png" alt="accommodation"/> < /div> <div id="search" class="activities">activities<img class="arrowtwo" src="../images/arrow.png" alt="activities"/> </div> <div id="search" class="facilities">facilities<img class="arrowtwo" src="../images/arrow.png" alt="facilities"/> </div> <div id="search" class="food">food<img class="arrowtwo" src="../images/arrow.png" alt="food"/> </div> <div id="search" class="health">health<img class="arrowtwo" src="../images/arrow.png" alt="health"/> </div> <div id="search" class="services">services<img class="arrowtwo" src="../images/arrow.png" alt="services"/> </div> <div id="search" class="sights">sights<img class="arrowtwo" src="../images/arrow.png" alt="sights"/> </div> <div id="search" class="transportation">transportation<img class="arrowtwo" src="../images/arrow.png" alt="transportation"/> </div> </body>
css:
body.search{background-color: rgb(84,163,188); display:block; width:100%; } img.arrowtwo{ width:40px; height:7px; margin-right: 10px; float:right; } #search{ border-width: 1px 0px 1px 0px; border-style: solid; border-color: #000000; border-collapse:collapse; padding-top:10px; padding-bottom:10px; width:100%; position:relative; left:0px; }
you getting scrollbars because div width of 100% plus padding. idea wrap current html inside div , set it's width 100% add padding form inside new div:
<div class="wrapper"> <input id="searchbar" type="search" placeholder="search" /> // rest of form here .... </div>
Comments
Post a Comment