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 Quote Link to comment 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. Quote Link to comment Share on other sites More sharing options...
timothyarden Posted January 3, 2013 Author Share Posted January 3, 2013 (edited) 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> Edited January 3, 2013 by timothyarden Quote Link to comment 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; } ... Quote Link to comment 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? Quote Link to comment Share on other sites More sharing options...
Jessica Posted January 3, 2013 Share Posted January 3, 2013 Quote Link to comment 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)? Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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; } Quote Link to comment 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; } Quote Link to comment Share on other sites More sharing options...
timothyarden Posted January 12, 2013 Author Share Posted January 12, 2013 Thanks computermax2328 Quote Link to comment 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). Quote Link to comment 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. 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.