css - Padding behaving like Margin -
i have 2 divs side side within wrapper div. fit , display correctly. however, when try add padding left side of left hand div, not moves contents of div on right, moves content of right hand div on well! if add on 20px of padding moves right hand div down next row! how on earth possible? posting css , html below. wrapper div "hwrapper". left hand div "rbox", , right hand div "card". said, adding padding left side of "rbox" moves content of "card" right well. how can fix this?
#header { height:800px; width: 100%; margin-top: 0px; background:url(/assets/header-tail.gif) 0 0 repeat-x #f7f7f7; } #hwrapper { width: 1000px; height: 600px; margin: 0 auto; text-align: center; } #header .logo { padding: 3px; text-align: center; } #rbox { background:url(/assets/hredbox.png) 0 0 no-repeat; height: 420px; width: 274px; float: left; text-align: left; padding-top: 10px; } #card { margin-left: auto; height: 420px; width: 720px; background:url(/assets/silverbackh360b0.png) 0 0 no-repeat; float: right; text-align: left; padding-top: 20px; }
html:
<div id="header"> <div class="logo"><%= link_to image_tag("etlogo.png",alt:"logo"), 'index.html' %></div> <div id="hwrapper"> <div id="rbox"><span><center>some text</center></span><br><p><br> <dl> list goes here. </dl><br><p><br> <span><center>log in here</center></span> </div> <div id="card">lots more text in here. </div> </div> </div>
any appreciated under belief padding effected elements within block, , margin effected relationship between blocks.
make sure width of 2 divs, including padding (i.e. if 25px wide 5px of padding around 35px wide) doesn't exceed width of container div.
Comments
Post a Comment