html - How come footer isn't inside Container? -
when made footer's width 100%, noticed stretched outside of container (which think based on html looks inside it). there's many divs when looked on 2-3 times (and think css reason it, still can't figure out), still no avail.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>social network</title> <link rel="stylesheet" type="text/css" href="css/styles.css" media="all"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href='https://fonts.googleapis.com/css?family=open+sans:400,700' rel='stylesheet' type='text/css'> <!--[if lt ie 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif] --> </head> <body> <!-- header --> <div class="container"> <div id="head_wrap"> <div id="header"> <img src="images/logo2.png"> <form method="post" action="" id="form1"> <strong>email:</strong> <input type="text" name="email" placeholder="email address" required="required"> <strong>password:</strong> <input type="password" name="password" placeholder="password" required="required"> <button name="login">login</button> </form> </div> </div> <!-- header --> <!-- content --> <div id="main_content"> <!-- content1 --> <br> <div id="content1"> <h2><em>join best online dating community!</em></h2> <img src="images/datephoto.png"> </div> <!-- content2 --> <div id="content2"> <form action="" method="post"> <h1>sign here!</h1> <table> <tr> <td align="right">name:</td> <td><input type="text" name="username" placeholder="enter name" required="required"></td> </tr> <tr> <td align="right">password:</td> <td><input type="password" name="userpassword" placeholder="enter password" required="required"></td> </tr> <tr> <td align="right">email address:</td> <td><input type="email" name="useremail" placeholder="first.last@email.com" required="required"></td> </tr> <tr> <td align="right" required="required">gender:</td> <td> <select name="user_gender"> <option>select gender</option> <option>male</option> <option>female</option> </select> </td> </tr> <tr> <td align="right" required="required">birthdate:</td> <td><input type="date" name="userbirthdate"></td> </tr> <tr> <td align="right" required="required">country:</td> <td> <select name="user_country" > <option>select country</option> <option>united states</option> <option>canada</option> <option>mexico</option> <option>china</option> <option>united kingdom</option> <option>vietnam</option> </select> </td> </tr> <tr> <td align="right" colspan="6"> <button name="sign_up_btn">sign up</button> </td> </tr> </table> </form> </div> </div> <!-- footer --> <div id="footer"> <h2>social network © 2016</h2> </div> </div> </body> </html> css code:
/************************************************* ******************* css reset ******************** *************************************************/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 license: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } /* html5 display-role reset older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { background-color: #ffffff; font-family: 'open sans', sans-serif; } .container { margin: 0; padding: 0; background-color: #e6e6fa; height: 100%; width: 100%; border: 1px solid green; } #head_wrap { margin: 0 auto; width: 100%; padding: 0; height: 100px; border-bottom: 5px solid brown; background: #1e90ff; } /***************************** ******* header section ******* *****************************/ #header { margin: 0 auto; padding: 10px; height: 100px; /* border: 1px solid green; */ } #header img { height: 77px; width: 322px; margin-left: 20px; margin-top: 5px; float: left; /* border: 1px solid yellow; */ } #form1 { float: right; /*border: 1px solid pink;*/ line-height: 90px; } #form1 input { width: 150px; height: 10px; padding: 10px; } #form1 button { width: 100px; padding: 8px; margin-right: 20px; border-radius: 25px; } #form1 button:hover { background-color: blue; color: #ffffff; } #form1 button:active { background-color: darkblue; } /***************************** ******* content section ****** *****************************/ #main_content { width: 70%; height: 530px; margin: 0 auto; margin-top: 10px; /*border: 1px solid red;*/ } #content1 h2 { margin-bottom: 10px; } #content1 img { float: left; margin-right: 40px; width: 550px; height: 400px; /*border: 1px solid pink;*/ } #content2 { float: right; margin-right: 10px; margin-top: -54px; /*position: relative;*/ /*bottom: 452px;*/ /*left: 60px;*/ /*border: 1px solid yellow;*/ } #content2 h1 { display: inline-block; margin-bottom: 10px; /*border: 1px solid orange;*/ } #content2 input { width: 250px; height: 20px; padding: 10px; border-radius: 5px; border: 1px solid #000000; } #content2 select { width: 270px; padding: 10px; border-radius: 5px; border: 1px solid #000000; } #content2 button { /* position: relative;*/ width: 270px; padding: 10px; margin-top: 20px; margin-right: 4px; /*top: 10px;*/ /*left: -3px;*/ } #content2 button:hover { background-color: blue; color: #ffffff; } #content2 button:active { background-color: darkblue; } #content2 h1 { padding: 5px; margin-left: 112px; } /***************************** ******** footer section ****** *****************************/ #footer { padding: 10px; height: 105px; width: 100%; background-color: #1e90ff; border-top: 5px solid brown; clear: both; } #footer h2 { text-align: center; padding-top: 20px; color: #ffffff; }
you need box-sizing:border-box, because have width:100% 20px in padding.
/************************************************* ******************* css reset ******************** *************************************************/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 license: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; } /* html5 display-role reset older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } *, *::before, *::after { box-sizing: border-box } body { background-color: #ffffff; font-family: 'open sans', sans-serif; } .container { margin: 0; padding: 0; background-color: #e6e6fa; height: 100%; width: 100%; border: 1px solid green; } #head_wrap { margin: 0 auto; width: 100%; padding: 0; height: 100px; border-bottom: 5px solid brown; background: #1e90ff; } /***************************** ******* header section ******* *****************************/ #header { margin: 0 auto; padding: 10px; height: 100px; /* border: 1px solid green; */ } #header img { height: 77px; width: 322px; margin-left: 20px; margin-top: 5px; float: left; /* border: 1px solid yellow; */ } #form1 { float: right; /*border: 1px solid pink;*/ line-height: 90px; } #form1 input { width: 150px; height: 10px; padding: 10px; } #form1 button { width: 100px; padding: 8px; margin-right: 20px; border-radius: 25px; } #form1 button:hover { background-color: blue; color: #ffffff; } #form1 button:active { background-color: darkblue; } /***************************** ******* content section ****** *****************************/ #main_content { width: 70%; height: 530px; margin: 0 auto; margin-top: 10px; /*border: 1px solid red;*/ } #content1 h2 { margin-bottom: 10px; } #content1 img { float: left; margin-right: 40px; width: 550px; height: 400px; /*border: 1px solid pink;*/ } #content2 { float: right; margin-right: 10px; margin-top: -54px; /*position: relative;*/ /*bottom: 452px;*/ /*left: 60px;*/ /*border: 1px solid yellow;*/ } #content2 h1 { display: inline-block; margin-bottom: 10px; /*border: 1px solid orange;*/ } #content2 input { width: 250px; height: 20px; padding: 10px; border-radius: 5px; border: 1px solid #000000; } #content2 select { width: 270px; padding: 10px; border-radius: 5px; border: 1px solid #000000; } #content2 button { /* position: relative;*/ width: 270px; padding: 10px; margin-top: 20px; margin-right: 4px; /*top: 10px;*/ /*left: -3px;*/ } #content2 button:hover { background-color: blue; color: #ffffff; } #content2 button:active { background-color: darkblue; } #content2 h1 { padding: 5px; margin-left: 112px; } /***************************** ******** footer section ****** *****************************/ #footer { padding: 10px; height: 105px; width: 100%; background-color: #1e90ff; border-top: 5px solid brown; clear: both; } #footer h2 { text-align: center; padding-top: 20px; color: #ffffff; }<!-- header --> <div class="container"> <div id="head_wrap"> <div id="header"> <img src="images/logo2.png"> <form method="post" action="" id="form1"> <strong>email:</strong> <input type="text" name="email" placeholder="email address" required="required"> <strong>password:</strong> <input type="password" name="password" placeholder="password" required="required"> <button name="login">login</button> </form> </div> </div> <!-- header --> <!-- content --> <div id="main_content"> <!-- content1 --> <br> <div id="content1"> <h2><em>join best online dating community!</em></h2> <img src="images/datephoto.png"> </div> <!-- content2 --> <div id="content2"> <form action="" method="post"> <h1>sign here!</h1> <table> <tr> <td align="right">name:</td> <td> <input type="text" name="username" placeholder="enter name" required="required"> </td> </tr> <tr> <td align="right">password:</td> <td> <input type="password" name="userpassword" placeholder="enter password" required="required"> </td> </tr> <tr> <td align="right">email address:</td> <td> <input type="email" name="useremail" placeholder="first.last@email.com" required="required"> </td> </tr> <tr> <td align="right" required="required">gender:</td> <td> <select name="user_gender"> <option>select gender</option> <option>male</option> <option>female</option> </select> </td> </tr> <tr> <td align="right" required="required">birthdate:</td> <td> <input type="date" name="userbirthdate"> </td> </tr> <tr> <td align="right" required="required">country:</td> <td> <select name="user_country"> <option>select country</option> <option>united states</option> <option>canada</option> <option>mexico</option> <option>china</option> <option>united kingdom</option> <option>vietnam</option> </select> </td> </tr> <tr> <td align="right" colspan="6"> <button name="sign_up_btn">sign up</button> </td> </tr> </table> </form> </div> </div> <!-- footer --> <div id="footer"> <h2>social network © 2016</h2> </div> </div>
Comments
Post a Comment