CODEWITHSUNDEEP
htmlcss
Vader
Vader

Reputation: 6736

Make a div take up the entire width of the page

I am working on a small site. To make it easier to read I pushed all the content of the site into the center with.

body {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

The problem is that the div follows this rule and is only in the very center.

enter image description here

In the footer class I tried resetting the margins and width by setting them back to 100% but that didn't work.

.footer {
  width: 100%;
  margin-left: 0%;
  margin-right: 100%;
}

CodePen

Upvotes: 2

Views: 4881

Answers (3)

MrPickles
MrPickles

Reputation: 949

Try moving the css from your body into a containing <div> and put all your content in that and have your footer below the containing <div> and if the element is unique use ids not class

e.g.

HTML:
<body>
<div id="mainContent">
 <!-- Main site stuff here -->
</div>
<div id="footer">
 <!-- footer info here-->
</div>

CSS:
body{
 /*No CSS*/
}
#mainContent{
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

#footer {
  width: 100%;
  margin: 0;
}

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 241208

Either place the .footer element outside of the wrapper element:

Example Here

In this case, use an element other than the body to function as the wrapper/container. I used an element with class .container:

.container {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

As an alternative, you could also absolutely position the .footer element and add left: 0; right: 0; in order for it take up the entire width of the page:

Example Here

.footer {
  position: absolute;
  left: 0;
  right: 0;
}

Upvotes: 2

MTCoster
MTCoster

Reputation: 6145

Instead of setting the entire body to 500px width, create a div for your main content, and then place the footer underneath.

#content {
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}
<body>
  <div id="content">
    <!-- Main page content here -->
  </div>
  <div id="footer">
    <!-- Footer content here -->
  </div>
</body>

Upvotes: 2

Related Questions