timothyarden Posted January 3, 2013 Share Posted January 3, 2013 Hi Everyone, I am having trouble with something that I would think should be reasonably simple: On a standard webpage there is a automatic 5px (approx) white space stretching around all sides of the page. I would like to be able to make div elements on my page stretch to the very edge. Does anyone know how to do this in HTML or CSS. Thanks in advance, Timothy Link to comment https://forums.phpfreaks.com/topic/272633-streching-html-to-page-edge/ Share on other sites More sharing options...
Jessica Posted January 3, 2013 Share Posted January 3, 2013 Set the body and html margin to 0 px in your CSS. Link to comment https://forums.phpfreaks.com/topic/272633-streching-html-to-page-edge/#findComment-1402897 Share on other sites More sharing options...
timothyarden Posted January 3, 2013 Author Share Posted January 3, 2013 Thanks for the reply. I did that earlier and it doesn't change anything - My CSS [Doctype CSS] /*style.css*/ html, body { color:white; font-size:14px; font-family:Georgia, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif; -webkit-font-smoothing: subpixel-antialiased; width:100%; background-color:#FF00BC; } img.banner { display: block; margin-left: auto; margin-right: auto; } div { width:100%; margin:0px 0px 0px 0px; z-index:-1; display: block; width: 100%; margin: 0px; margin-top: 0px; margin-right-value: 0px; margin-bottom: 0px; margin-left-value: 0px; margin-left-ltr-source: physical; margin-left-rtl-source: physical; margin-right-ltr-source: physical; margin-right-rtl-source: physical; padding: 0px; padding-top: 0px; padding-right-value: 0px; padding-bottom: 0px; padding-left-value: 0px; padding-left-ltr-source: physical; padding-left-rtl-source: physical; padding-right-ltr-source: physical; padding-right-rtl-source: physical; text-align: left; } div.container { padding:10px 0 10px 0; width:960px; position:relative; margin-left:auto; margin-right:auto; z-index:1; } div.menu { background-color:#FF00BC; height:40px; text-decoration: none; } div.menu a { color:#FFFFFF; } div.header { background-color:#FFFFFF; } div.content { background-color:#FF00BC; } div.footer { background-color:#000000; } h1 { font-size:20px; text-align:left; } #navigation { margin-top:21px; font-size:15px; font-family:Georgia, "Times New Roman", Times, serif; margin:5px 0 0 0; font-weight:normal; line-height:normal; font-weight:bold; margin:0; padding:0; list-style:none; line-height:normal; } Basic Structure of my HTML Page <!DOCTYPE html> <html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml"[/url] xml:lang="en" lang="en-US" container="text/html;" charset="UTF-8"> <head> <title><?php echo $page; ?></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> <link rel="icon" href="images/icon.ico" type="image/x-icon"/> <link /> </head> <body style="background-color:#FF00BC;"> <div class="menu" style=""> <div class="container"> <div id="navigation"> <ul> <li style="margin-left:5px;"><a href="index.php"><img src="images/logo.png" alt="Home" height="60px" width="60px"/></a><span></span></li> <li style="margin-left:5px;"><a href="index.php?page=home">Home</a><span>Welcome</span></li> <li style="margin-left:5px;"><a href="index.php?page=aboutus">About Us</a><span>Welcome</span></li> <li style="margin-left:5px;"><a href="#footer">Contact Us</a><span>Contact Details & Map</span></li> </ul> </div> <a href="index.php?page=home">Home</a> <a href="index.php?page=aboutus">About Us</a> <a href="#footer">Contact Us</a> </div> </div> <div class="header"> <div class="container"> <img class="banner" src="images/banner.png" align="middle"/> </div> </div> <div class="content"> <div class="container"> </div> </div> <div class="footer"> <div class="container"> </div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/272633-streching-html-to-page-edge/#findComment-1402903 Share on other sites More sharing options...
Jessica Posted January 3, 2013 Share Posted January 3, 2013 Set the body and html margin to 0 px in your CSS. Thanks for the reply. I did that earlier and it doesn't change anything - My CSS [Doctype CSS] /*style.css*/ html, body { color:white; font-size:14px; font-family:Georgia, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif; -webkit-font-smoothing: subpixel-antialiased; width:100%; background-color:#FF00BC; } ... Link to comment https://forums.phpfreaks.com/topic/272633-streching-html-to-page-edge/#findComment-1402918 Share on other sites More sharing options...
timothyarden Posted January 3, 2013 Author Share Posted January 3, 2013 I just did as you said and nothing has changed. Any other ideas? Link to comment https://forums.phpfreaks.com/topic/272633-streching-html-to-page-edge/#findComment-1402927 Share on other sites More sharing options...
Jessica Posted January 3, 2013 Share Posted January 3, 2013 Link to comment https://forums.phpfreaks.com/topic/272633-streching-html-to-page-edge/#findComment-1402930 Share on other sites More sharing options...
timothyarden Posted January 3, 2013 Author Share Posted January 3, 2013 I tried doing it in the style tag for body and it worked (Before it wasn't set there so it couldn't have been overriding the css style sheet markup). Do you know why it wouldn't be reading the css file (when all the rest is being read fine)? Link to comment https://forums.phpfreaks.com/topic/272633-streching-html-to-page-edge/#findComment-1402932 Share on other sites More sharing options...
Jessica Posted January 3, 2013 Share Posted January 3, 2013 Maybe your CSS was cached. Maybe you made a typo. Since you haven't actually shown that you did it, it's kind of hard to say. CSS can be tricky and a live link is usually helpful. Link to comment https://forums.phpfreaks.com/topic/272633-streching-html-to-page-edge/#findComment-1402933 Share on other sites More sharing options...
timothyarden Posted January 3, 2013 Author Share Posted January 3, 2013 Okay, Uploaded on dev site. Sent a link to your email - And yes I wrote all of it, I didn't copy it Link to comment https://forums.phpfreaks.com/topic/272633-streching-html-to-page-edge/#findComment-1402934 Share on other sites More sharing options...
jardrake Posted January 7, 2013 Share Posted January 7, 2013 Try something like this in your css html, body { margin:0px; padding:0px; } Link to comment https://forums.phpfreaks.com/topic/272633-streching-html-to-page-edge/#findComment-1403882 Share on other sites More sharing options...
computermax2328 Posted January 11, 2013 Share Posted January 11, 2013 Set the default padding and margin for all elements to zero. You can do this with the code below. It is always the first thing I do on all of my master.css sheets. For some reason chrome makes a default margin and padding. * { margin: 0px 0px; padding: 0px 0px; } Link to comment https://forums.phpfreaks.com/topic/272633-streching-html-to-page-edge/#findComment-1405007 Share on other sites More sharing options...
timothyarden Posted January 12, 2013 Author Share Posted January 12, 2013 Thanks computermax2328 Link to comment https://forums.phpfreaks.com/topic/272633-streching-html-to-page-edge/#findComment-1405067 Share on other sites More sharing options...
haku Posted January 12, 2013 Share Posted January 12, 2013 Setting the margin and padding to absolutely everything is generally considered a bad practice, as it's overkill and can screw up form elements. People generally use a 'reset stylesheet', which achieves the same goal of setting evertyhing consistent across browsers, and they usually remove padding and margin on the body (which is causing the original problem). Link to comment https://forums.phpfreaks.com/topic/272633-streching-html-to-page-edge/#findComment-1405102 Share on other sites More sharing options...
timothyarden Posted January 13, 2013 Author Share Posted January 13, 2013 Thanks haku, if you have one of these reset stylesheets would you be able to copy the code into a post on here please. Link to comment https://forums.phpfreaks.com/topic/272633-streching-html-to-page-edge/#findComment-1405269 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.