sepoto Posted February 18, 2011 Share Posted February 18, 2011 Does anyone have an example of a <div> styled with CSS that I can add padding to without the thing resizing itself bigger? Thank you! Link to comment Share on other sites More sharing options...
Synook Posted February 18, 2011 Share Posted February 18, 2011 That's just the way the box model works. If the width is auto though, the division shouldn't get wider. Alternatively, you can apply the padding to a child element instead. Link to comment Share on other sites More sharing options...
sepoto Posted February 18, 2011 Author Share Posted February 18, 2011 I am still unable to do it with a child element. In addition I am realizing that the padding I do add does not work on the right and probably on the left as well. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd"><html><head><style>.divcenter {margin-left: 200px;}</style></head><body> <div style='height: 180px; max-height: 180px; width: 325px; border: 1px solid black; float: left; text-align: right; margin-left: 200px; padding: 20px; overflow: hidden;'> <div style='height: auto; width: auto; padding: 10px;'><a href="">Read more...</a></div> </div> <div style='height: 180px; width: 50px; border: 1px solid black; float: left; text-align: right;'> <a href="">Read more...</a> </div> <div style='height: 180px; width: 325px; border: 1px solid black; float: left; text-align: right;'> <a href="">Read more...</a> </div></body></html> Link to comment Share on other sites More sharing options...
cousineaug Posted February 18, 2011 Share Posted February 18, 2011 I am still unable to do it with a child element. In addition I am realizing that the padding I do add does not work on the right and probably on the left as well.Looking at it in Chrome it seems to do what you asked. I added a border tot he inner div to see where things are:<div style='height: auto; width: auto; padding: 10px;border: 1px red solid;'> The outer div has some padding all around, as does the inner div.If the inner DIV overflows, it seems to overwrite the bottom padding...not sure if that is normal or not.The other 2 DIVs are right justified with no padding.If this is now what you are seeing, then you have issues with your browser :-)If this is not the behaviour that you want, try to verbalize it here and I am sure you will get plenty of ideas how to modify....Guy Link to comment Share on other sites More sharing options...
jeffman Posted February 18, 2011 Share Posted February 18, 2011 Let's say you start with a box 100px by 100px. Now you want 10px of padding on all sides. You also want the box to stay 100x100. You will have to redefine the height and width of the box to be 80px. 80 + 10 + 10 = 100 Link to comment Share on other sites More sharing options...
ShadowMage Posted February 18, 2011 Share Posted February 18, 2011 Let's say you start with a box 100px by 100px. Now you want 10px of padding on all sides. You also want the box to stay 100x100. You will have to redefine the height and width of the box to be 80px. 80 + 10 + 10 = 100At least until box-sizing is supported....EDIT: I tested this page in all the major browsers and it worked. FF, Chrome, Opera, Safari, and even IE8. Seems box-sizing is better supported than I thought. Link to comment Share on other sites More sharing options...
sepoto Posted February 18, 2011 Author Share Posted February 18, 2011 I really must thank ShodowMage for his last post. Not only did it work on the first try but it is also exactly what I have been looking for. Perhaps I am just a simpleton. Link to comment Share on other sites More sharing options...
jeffman Posted February 19, 2011 Share Posted February 19, 2011 It took me a while to realize why I'd want to use the old IE box model. And THEN I noticed that the examples were able to combine percentages with absolute units and have it WORK. I've been looking forward to the calc feature to do just that, but if this technique works now, that's fine by me.IE7 notwithstanding, of course. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.