All geek questions in one place

Div fills the entire width of the screen

I am trying to add a title to my site, but I cannot get the container to fit the width of the screen, even though the width is set to 100% or auto . It always has a border of ~ 5px both on the left and on the right, even if the margin and margins are set to 0.

HTML:

 <div id="header"> <h7> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> <p>Lorem Ipsum</p> </h7> </div>

CSS

 body div#header{ width: 100%; margin: 0; padding: 0; background-color: #c0c0c0; }
+6
source share
7 answers

Add

 body, html{ margin:0; padding:0; }

into your CSS.

Browsers set default fields and / or pads when rendering websites. With this you can avoid this.

+14
source

This is because it is supplemented by the parent. Do you have this in another div? Or maybe you have a padding / margin property set on the body of the document? Please put the full CSS. If you do not, because the browser adds it for you, so just enter it:

 body { margin: 0; padding: 0; }
+1
source 
 body, html { margin: 0; padding: 0; } div { width: 100%; margin: 0; padding: 0; background-color: #c0c0c0; }

OR

 html, body, div { margin:0; padding:0; border:0; outline:0; background:transparent; }
+1
source

set the null marker in the body / html tags in your CSS. See if that helps.

0
source

You need to add reset, for example:

 html, body, div { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }

All browsers have a default stylesheet. You need to override it with reset.

0
source

Try this, I hope this helps:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Header & Footer</title> <style type="text/css"> /* Global */ * { margin: 0; } html, body { height: 99%; } /* Header */ .container{ min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; width:100%; font-family:Segoe UI; color:#fff; } .container-header{ padding-top:5px; padding-left:20px; } /* Footer */ .footer{ background-color:#333030; width:100%; font-family:Segoe UI; color:#fff; } .footer img{ padding-left:15px; } /* Page Content */ .content{ height: auto !important; } .container p{ font-size:12pt; font-weight:bold; } </style> </head> <body> <!-- Header Div --> <div class="container"> <table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px"> <tr></tr> <tr> <td></td> <td> <div style="padding-left:100px;font-size:36px;">Header</div> </td> </tr> <tr></tr> </table> <!-- Page Content Div --> <div class="content"> Blah Blah </div> </div> <!-- Footer Div --> <div class="footer"> <table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px"> <tr></tr> <tr> <td></td> <td> <div style="padding-left:100px;font-size:36px;">Footer</div> </td> </tr> <tr></tr> </table> </div> </body> </html>
0
source

Try using the following code:

 <!DOCTYPE html> <html> <head> <style> body, html{ margin:0; } </style> </head>
0
source

Source: https://habr.com/ru/post/921803/

More articles:


All Articles