divinedesigns1 Posted December 23, 2012 Share Posted December 23, 2012 ok, im having a problem with displaying the right side padding as it should the left side display all 3 layers of padding but when it comes to the right side it does not display any type padding on any of its layers i dont see anything with the css nor the html for this but ill put it below this sentence <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Fully Div & CSS Website</title><style type="text/css">html {width:100%;height:100%;overflow:hidden;margin:0px;padding:0px 20px 0px 20px;border:1px solid #C00;}body {width:100%;height:100%;margin:0px;padding:0px 20px 0px 20px;background:#000;border:1px solid #C00;}#main-wrap {width:100%;margin:0px;padding:0px 20px 0px 20px;background:#fff;height:inherit;border:1px solid #C00;}</style></head><body><div id="main-wrap"><div id="secondary">This is the main wrap</div></div></body></html> as you can see, the main-wrap, body and html have a left and right padding of 20px and a width of 100% but the padding doesnt display at all, can you check and let know if i did anything wrong? all opinions are accepted Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 23, 2012 Share Posted December 23, 2012 (edited) A little bit of explaining... First when you set the HTML to 100% its going to extend the whole box to the viewport. Then if you add any Padding or a Border to the 100% HTML it will then make the total size the viewport + padding + border which is larger than the viewport obviously. Then when you added overflow: hidden on top of that anything that did exceed the original 100% which is the viewport was hidden. The same concept is true for the body and any div you will ever do. I do not recommend ever adding padding or borders to the HTML or Body, and never make a border around your webpage cause it will never render correctly without javascript. Hope that helps. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Fully Div & CSS Website</title><style type="text/css">html {height: 100%;margin:0px;overflow: hidden;}body {height: 100%;margin:0px;padding:0px 20px 0px 20px;background:#000;border:1px solid #C00;}#main-wrap {height: 100%;margin:0px;padding:0px 20px 0px 20px;background:#fff;height:inherit;border:1px solid #C00;}</style></head><body><div id="main-wrap"><div id="secondary">This is the main wrap</div></div></body></html> Edited December 23, 2012 by DarkxPunk Link to comment Share on other sites More sharing options...
divinedesigns1 Posted December 25, 2012 Author Share Posted December 25, 2012 A little bit of explaining... First when you set the HTML to 100% its going to extend the whole box to the viewport. Then if you add any Padding or a Border to the 100% HTML it will then make the total size the viewport + padding + border which is larger than the viewport obviously. Then when you added overflow: hidden on top of that anything that did exceed the original 100% which is the viewport was hidden. The same concept is true for the body and any div you will ever do. I do not recommend ever adding padding or borders to the HTML or Body, and never make a border around your webpage cause it will never render correctly without javascript. Hope that helps. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Fully Div & CSS Website</title><style type="text/css">html {height: 100%;margin:0px;overflow: hidden;}body {height: 100%;margin:0px;padding:0px 20px 0px 20px;background:#000;border:1px solid #C00;}#main-wrap {height: 100%;margin:0px;padding:0px 20px 0px 20px;background:#fff;height:inherit;border:1px solid #C00;}</style></head><body><div id="main-wrap"><div id="secondary">This is the main wrap</div></div></body></html> thanks, but this wouldnt be a real website, im just messing around with html to find different ways to create websites using divs and css Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now