3 replies [Last post]
vancouver
vancouver's picture
Offline
newbie
Last seen: 4 years 2 weeks ago
Timezone: GMT-7
Joined: 2015-08-05
Posts: 1
Points: 2

Here is the code. Tryed a few things but so far, it has created even left and right and top padding but the footer parent is outside the container parent.

/*--------CSS RESET ----------*/
 
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;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
 
/*---- Start of my code ---------------------------------------------------------------*/
 
 
 
 
p.footer {
    color:white;
    font-family:Arial;
    font-size:1em;
 
}
 
 
.container {
    margin: 0px; /* container has no margin and wraps all css and html tags */
    padding:0px;
    width: 100%;
 
    height:auto;
    background-color: #FFF;
    font-family: avenir,sans-serif;
}
 
 
 
 
#topleftmenu { /*this is the top left menu. background color is only for visual sizing use only. log goes here */
 
    float:left;
    height: 95px;
    width:50%;
    background-color:yellow;
}
 
 
#toprightmenu {  /* this is where the contact number, and social media tags will be located in the future*/
 
	float:right;
	height:95px;
    width:50%;
    background-color:orange;
}
 
#headermenu { /* this is a main menu. It will be over lapping the flash images in header is a z-index of 1 */
 
 
    height:20px;
    display: inline;
    float: left;
    list-style: outside none none;
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
    z-index:1;
    margin: 0px;
    width: 500px;
}
 
 
 
#header { /* where flash will show products sold */
 text-align: center;
top:105px;
height:350px;
width:100%;
background-color:green;
}
 
nav ul {              
list-style-type: none;
margin-left:auto; margin-right:auto; /*centers the block element */
text-align: center;
 
}
 
 
ul li { 
 
 
    margin-left:auto; margin-right:auto;
    list-style-type: none;
	width:50px;
    background-color: white;
    display:inline-block;
    margin:0px;
    padding:5px;
    width:auto;
 
 
}
 
#content { 
    width:100%;
    background-color:blue;
    height:500px;
}
 
 
 
#footer {
    padding:3% 3%;
    width:100%;
    background-color:#999966;
    height:150px;
}
 
 
.box1 {
width:30%;
height:90%;
background-color:orange;
float:left;
}
 
.box2 { 
width:30%;
height:90%;
background-color:green;
float:left;
}
 
.box3 { 
width:30%;
height:90%;
background-color:pink;
float:left;
}

<!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8"/>
    <title>Daves css box model</title>
    <link rel="stylesheet" type="text/css" href="style.css">
 
    </head>
     <body>
      <div class="container">
        <div id="topleftmenu">top left menu</div> 
         <div id="toprightmenu">top right menu</div>   
 
 
              <div id="header">
                <div id="menubackground">
                  <ul>
                      <li><a href="#" style="text-decoration: none;">Home</a></li>
                      <li><a href="#">About</a></li>
                      <li><a href="#">Services</a></li>
                      <li><a href="#">Products</a></li>
                      <li><a href="#">Gallery</a></li>
                      <li><a href="#">test</a></li>
                  </ul>
                </div>    
              </div>
 
 
        <div id="content"></div>
 
          <div id="footer">
                <div class="box1">box1
                 </div>         
                <div class="box2">box2
                  </div>
                <div class="box3">box3
                  </div>
          </div>  
 
 
 
    </div>   <!-- container div-->
  </body>            
</html>  

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 4 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Hi vancouver, Looks right to

Hi vancouver,
Looks right to me.
What makes you think the footer parent is in the wrong position?
Can you explain what you see and what you expected.

Saeven
Saeven's picture
Offline
newbie
Denmark
Last seen: 3 years 48 weeks ago
Denmark
Timezone: GMT+7
Joined: 2015-08-24
Posts: 4
Points: 5

padding and width

I won't bet on this, but seams for me that the total width of the footer is 106%.
Just a wild guess Cool

Shockyy
Shockyy's picture
Offline
newbie
Last seen: 3 years 51 weeks ago
Timezone: GMT+2
Joined: 2015-08-27
Posts: 1
Points: 1

This was your problem

This was your problem

#footer {
    padding:3% 3%; /* This Right here */
    width:100%;
    background-color:#999966;
    height:150px;
}

here's the fix Smile

 
#footer {
    width: 100%;
    background-color:#999966;
    height:150px;
}
 
 
.box1 {
  margin-left: 5%;
  width:30%;
  height:90%;
  background-color:orange;
  float:left;
}