Text outside of footer

text overlapping footer in word
how to move text in header up
how to lower footer in word
headers and footers
how to anchor a footer in word
word footer too high
word footer location
how to adjust footer in word

I'm trying to add text to my footer but my second and third texts are below my footer. What can I do to put it inside my footer? I know it has something to do with block-level but what is it exactly that needs to be done. Please and thank you for taking your time to answer my question.

#footer {
  background: #2e3131;
  position: relative;
  height: 165px;
  margin-top: -100px;
  clear: both;
}

.footer-contact {
  color: #fff;
}

.headquaters {
  text-align: center;
  color: rgb(255, 0, 0);
}

.social-media {
  float: right;
  color: rgb(255, 0, 238);
}
<footer id="footer">
  <div class="footer-contact">
    <h3>Contact Us</h3>
    <p>Phone: (777) 777-7777</p>
    <p>Cell: (347) 777-7777</p>
    <p>E-mail: someone@gmail.com</p>
  </div>

  <div class="headquaters">
    <h3>Locations</h3>
    <p>90 John Street</p>
  </div>


  <div class="social-media">
    <h3>Follow our social media</h3>
    <i style="font-size:24px" class="fa">&#xf230;</i>
  </div>

</footer>

Remove margin-top:-100px; and give float to div for setting inline in your footer height

#footer {
  background: #2e3131;
  position: relative;
  height: 165px;
  margin-top: 0px;
  clear: both;
}

.footer-contact {
  color: #fff;
      float: left;
    width: 33.33%;
}

.headquaters {
  text-align: center;
  color: rgb(255, 0, 0);    
  float: left;
    width: 33.33%;
}

.social-media {
  float: right;
  color: rgb(255, 0, 238);
}
<footer id="footer">
          <div class="footer-contact">
            <h3>Contact Us</h3>
              <p>Phone: (777) 777-7777</p>
              <p>Cell: (347) 777-7777</p>
              <p>E-mail: someone@gmail.com</p>
            </div>

            <div class="headquaters">
              <h3>Locations</h3>
                <p>90 John Street</p>
            </div>


              <div class="social-media">
               <h3>Follow our social media</h3> 
                <i style="font-size:24px" class="fa">&#xf230;</i>
                  </div>

                   </footer>

Keep Word headers and footers from overlapping your document's text, Click the up arrow of the From Edge: Footer box until you reach 1" and then click OK. Miss a Word tip? Check out the Microsoft Word archive, and  Enter the footer text. Optionally, use the formatting tools. (Optional) Select append the footer to internal messages being sent within your organization. Click Add Setting or Save. Any new

Actually, you are adding height in px to the #footer, what you need to do is to increase the height.

#footer {
  background: #2e3131;
  position: relative;
  height: 500px;
  margin-top: -100px;
  clear: both;
}

or you can check here

Aligning a footer on the outside text margins - TeX, Move the focus out of the footer section into your content section and paste the copied section; Delete the duplicate section from the footer that you copied out  By design (I'm not saying it's a good design, just that it's by design), Writer includes headers and footers on the text area: Bug 33304 - Header / Footer should be inserted into margin, not into text body. The only way around this is to reduce the top and bottom margins to get the right distance from page border to text area. Note that while

I think it's much more simple when you use flexbox, also avoid using negative margin value when you're trying to position elements

#footer {
  background: #2e3131;
  position: relative;
  top: 100px;
  height: 165px;
  display: flex;
  justify-content: space-between;
}

.footer-contact {
  color: #fff;
}

.headquaters {
  text-align: center;
  color: rgb(255, 0, 0);
}

.social-media {
  float: right;
  color: rgb(255, 0, 238);
}
<footer id="footer">
  <div class="footer-contact">
    <h3>Contact Us</h3>
    <p>Phone: (777) 777-7777</p>
    <p>Cell: (347) 777-7777</p>
    <p>E-mail: someone@gmail.com</p>
  </div>

  <div class="headquaters">
    <h3>Locations</h3>
    <p>90 John Street</p>
  </div>


  <div class="social-media">
    <h3>Follow our social media</h3>
    <i style="font-size:24px" class="fa">&#xf230;</i>
  </div>

</footer>

Move content out of footer, Go to the Insert tab and there you have the Header & Footer section, there you can choose to put preformatted headers and/or footers and you  Tip: Contact information inside a <footer> element should go inside an <address> tag. Browser Support The numbers in the table specify the first browser version that fully supports the element.

You can add the following style in your footer: #footer {width:100%; display:inline-block;}

#footer {
  background: #2e3131;
  position: relative;
  clear: both;
  width:100%;
  display:inline-block;
}

.footer-contact {
  color: #fff;
  float:left;
}

.headquaters {
  text-align: center;
  color: rgb(255, 0, 0);
  float:left;
}

.social-media {
  float: right;
  color: rgb(255, 0, 238);
}
<footer id="footer">
          <div class="footer-contact">
            <h3>Contact Us</h3>
              <p>Phone: (777) 777-7777</p>
              <p>Cell: (347) 777-7777</p>
              <p>E-mail: someone@gmail.com</p>
            </div>

            <div class="headquaters">
              <h3>Locations</h3>
                <p>90 John Street</p>
            </div>


              <div class="social-media">
               <h3>Follow our social media</h3> 
                <i style="font-size:24px" class="fa">&#xf230;</i>
                  </div>

                   </footer>

How do I write page number and date outside the border in MS , you use the header or footer of a Word document whenever you want to insert text or So what do you need to do to make a header outside the header area? On the Insert tab, in the Text group and click the Header & Footer button. On the Design tab, click Go to Footer or scroll down to the footer boxes at the bottom of the page. Depending on the desired location, click the left, center, or right footer box, and type some text or insert the element you want.

Headers Unbound - Word FAQ site, Repeated text. One of the most common elements of a header or footer is a page number. You may already have figured out how to  FlowType is kind of designed to work on a whole document of text, resizing it all fluidly at once, with minimum and maxium viewport sizes. But you can scope it however you want. You also apply a magic number to get things how you want them. See the Pen Fitted Text with FlowType by Chris Coyier (@chriscoyier) on CodePen. Just use SVG

Using Headers and Footers - Word FAQ site, Il Writer, margin are no man's land forbidden to text flow. Only manually positioned objects, such as frames, can reside in there. So, the question is  Right-click the shape and choose Add Text from the resulting submenu. In Word 2003, use the Header and Footer contextual toolbar to insert the page number, and then format as you normally would

Header and Footer needed outside the page margin, Hi: I am wondering why my footer is showing up outside of my wrapper. type="​image/x-icon"/> <link rel="stylesheet" type="text/css" href="css/styles.css"/> <link​  1) The header contains a blank line of text outside the table. That line had a paragraph spacing setting of 18 points. Cut that to 6 and voila. Can't believe I didn't figure this out sooner. :D. 2) The footer is a bit trickier. It contains a table (if yours doesn't you could probably set it up so that it did, at least if it's text).

Comments
  • you can use float like some of the answers below, but I recommend using flexbox:css-tricks.com/snippets/css/a-guide-to-flexbox or you can use twitter-bootstrap
  • I totally agree with your solution, but using flexbox requires more skill, I am afraid it won't be easily maintainable by a beginner.
  • I'm not really agree on this point, flexbox seems to be a little bit difficult to handle, though it's new to everyone & it defines a different mechanism on handling elements, so it puts expert & beginner not too far from each other when first being introduced to.