HTML/CSS float: left; is not working properly -
i'm reading headfirst css/html , i'm having issue example.
i'm attempting float body left of sidebar using float:left; it's not floating properly. i've been on html , css can't quite see what's wrong.
this want like:
and fiddle: https://jsfiddle.net/taubin/7lhz4wtd/
#main { background: #efe5d0 url(images/background.gif) top left; font-size: 105%; padding: 15px; margin: 0px 10px 10px 10px; width: 420px; float: left; }
<div id="allcontent"> <div id="header"> </div> <div id="sidebar"> <p class="beanheading"> sidebar text </p> <p> sidebar text </p> </div> <div id="main"> <h1>quality coffee, quality caffeine</h1> <p> main text </p> </div> </div>
any suggestions appreciated.
first, might issue adding margin , paddings, add size box though box has width of 420px, have calculate margins , paddings to, or use * { box-sizing: border-box; }
, calculate width of element sum of sizes (padding, margin, width) , not exceed width.
second, order of elements important when floating, put main on top of sidebar, since elements start top bottom, when float top element, bottom element if wider, collapse , align main box.
screenshot reference:
Comments
Post a Comment