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> Link to comment https://forums.phpfreaks.com/topic/166946-padding-in-div/ 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 Link to comment https://forums.phpfreaks.com/topic/166946-padding-in-div/#findComment-880213 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. Link to comment https://forums.phpfreaks.com/topic/166946-padding-in-div/#findComment-880991 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 Link to comment https://forums.phpfreaks.com/topic/166946-padding-in-div/#findComment-881397 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.