HTML and CSS school project

Question

I have to do a project in school using HTML and CSS and so far all am trying to do is the page layout and for whatever reason when I put the footer for my webpage it pops up on the top of the page instead of the bottom and I'm also having a bit of trouble trying to resize it to fix the whole page.

    #wrapper {
      width: 1024px;
      height: 768px;
      background-color: #E1E0E0;
    }
    #banner {
      width: 1024px;
      height: 220px;
      background-color: #6E6A6A;
    }
    #menuTop {
      width: 1024px;
      height: 35px;
      background-color: #ACAAAA;
    }
    #columnLeft {
      width: 220px;
      height: 438px;
      background-color: #CBCACA;
      float: left;
    }
    #columnRight {
      width: 220px;
      height: 438px;
      background-color: #CBCACA;
      float: right;
    }
    #content {
      width: 584;
      height: 438;
      background-color: #E1E0E0;
      margin-left: 220px;
    }
    #footer {
      width: 1024px;
      height: 75px;
      background-color: #6E6A6A;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="FinalHTML.css">
  <title></title>
</head>

<body>
  <div id="wrapper">
    <div id="banner">
    </div>
    <div id="menuTop">
    </div>
    <div id="columnLeft">
    </div>
    <div id="columnRight">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
  </div>
</body>

</html>

Generally, users of Stack overflow discourage questions like this. Asking the community to do your homework for you is not what this site is for. — Ryan Smith
– Ryan Smith, Commented Nov 8, 2014 at 3:05
just curious but...why there is no close button here for this question? — Ekin
– Ekin, Commented Nov 8, 2014 at 3:06
I'd downvote this question if the OP was asking SO to do his homework if he didn't do anything, but the OP already has made a sensible effort and ran into a problem that he can't see - there are thousands of SO questions like this with accepted answers. I don't see a difference. — Adam Jenkins
– Adam Jenkins, Commented Nov 8, 2014 at 3:07
thank everyone for the help once again sorry if it was really simple which I was im just really bad at finding problems. now I just have 5 pages to code and that's it — Jesse Figueroa
– Jesse Figueroa, Commented Nov 8, 2014 at 3:17

rnrneverdies · Accepted Answer · 2014-11-08 03:13:44Z

The height and width must have a unit, like px, dpi, etc.

#wrapper {
      width: 1024px;
      height: 768px;
      background-color: #E1E0E0;
    }
    #banner {
      width: 1024px;
      height: 220px;
      background-color: #6E6A6A;
    }
    #menuTop {
      width: 1024px;
      height: 35px;
      background-color: #ACAAAA;
    }
    #columnLeft {
      width: 220px;
      height: 438px;
      background-color: #CBCACA;
      float: left;
    }
    #columnRight {
      width: 220px;
      height: 438px;
      background-color: #CBCACA;
      float: right;
    }
    #content {
      width: 584px; // here you frogot the unit (px in this case)
      height: 438px;
      background-color: #E1E0E0;
      margin-left: 220px;
    }
    #footer {
      width: 1024px;
      height: 75px;
      background-color: #6E6A6A;
    }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="FinalHTML.css">
  <title></title>
</head>

<body>
  <div id="wrapper">
    <div id="banner">
    </div>
    <div id="menuTop">
    </div>
    <div id="columnLeft">
    </div>
    <div id="columnRight">
    </div>
    <div id="content">
    </div>
    <div id="footer">
    </div>
  </div>
</body>

</html>

JakeParis · Accepted Answer · 2014-11-08 03:03:48Z

1

You forgot to type px after your height and width on the content div.

width: 584;
height: 438;

should be

width: 584px;
height: 438px;

answered Nov 8, 2014 at 3:03

JakeParis

11.2k6 gold badges44 silver badges67 bronze badges

2 Comments

Adam Jenkins Over a year ago

I imagine the downvoter is trying to discourage answers on a "homework" question (even though I think the question is perfectly valid).

Ekin Over a year ago

weird but I saw you got -2 and then it was +2 and now it's 0?? lol

kevin hendrickx · Accepted Answer · 2014-11-08 03:03:54Z

1

#content {
width: 584;
height: 438;
background-color: #E1E0E0;
margin-left: 220px;
}

You forgot the "px"

answered Nov 8, 2014 at 3:03

kevin hendrickx

1161 silver badge7 bronze badges

Collectives™ on Stack Overflow

HTML and CSS school project

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related