everisk Posted July 22, 2009 Share Posted July 22, 2009 I have CSS like and i try to position the input box inside the big box with the top padding of 15px. However, with the below code the bigbox get stretched downwards by 15px and the background image is just repeated (I know this can be fix easily but I dont want to have the bigbox stretched). How do I position the input box 15px down from the top and the bigbox is still 49px? Thanks! <div id="bigbox" style="height: 49px; background-image:url(../images/bigbox_bg.jpg); padding-top:15px;"> <input name="input_box" type="text" size="50" maxlength="250"> </div> Quote Link to comment Share on other sites More sharing options...
Darghon Posted July 22, 2009 Share Posted July 22, 2009 there are 2 ways to fix it first you can just decrease your div height with the padding you want (so instead of 49px, 34px) the 2nd way is the best way: set a margin-top on your input, this will fix the problem without resizing the div Quote Link to comment Share on other sites More sharing options...
everisk Posted July 23, 2009 Author Share Posted July 23, 2009 Oh thanks! I just thought of the second 2 solutions but it's good to know the first solution too. Quote Link to comment Share on other sites More sharing options...
tbare Posted July 23, 2009 Share Posted July 23, 2009 yeah... always remember the box model... padding adds to the total width/height of the div... i fought that way too much before i found the box model.. http://www.w3.org/TR/CSS2/box.html Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.