CODEWITHSUNDEEP
htmlcss
user23524697
user23524697

Reputation: 147

How do I center specific content without affecting the rest?

I'm very new to programming but so far I'm addicted to it! I've looked on this site before posting my own question. I have found part of what I looked for but after trying few codes around, it didn't work so I thought about breaking the ice and asking for help!

Note: I'm using Kompozer.

What I try to attempt: I want the header and the footers to be full width while keeping the rest centered. I also want the white space below the footer to be full width just like at the top of the header. See this example.

Compared to that website, my website is yes centered but there is white space on each side and a bit of it below my footer. I hope I'm being clear enough for you to give me a hand! Thanks a lot!

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  #wrap {
    margin: 0 auto;
    width: 1156px;
  }
<body>
  <div id="wrap">
    <div id="headers">
      <div id="left">
        <div id="h1">
          <div style="text-align: left;">
            <div style="text-align: left;">
              <img style="width: 27px; height: 27px;" alt="" src="images/phone-icon-hi.png" align="top" vspace="5">+1-844-Meb-Zone&nbsp;&nbsp; &nbsp;&nbsp;
              <img style="width: 27px; height: 27px;" alt="" src="images/icon-mail-grey-150x150.png" align="top" vspace="5">[email protected]
              <br>
            </div>
            &nbsp;</div>
          <br>
        </div>
      </div>
      <div id="right">
        <div style="text-align: right;" id="h2">
          <img style="width: 33px; height: 33px;" alt="" src="images/lightbulb-grey.png" align="top" vspace="5">Try Our Customer Rewards Program &amp; Save Money on every order!
          <img style="width: 33px; height: 33px;" alt="" src="images/lightbulb-grey.png" align="top" vspace="5">
          <br>
        </div>
      </div>
    </div>
    <div id="menus">
      <div id="left">
        <div id="m1">
          <div style="text-align: center;">
            <div style="text-align: left;">
              <img style="width: 384px; height: 76px;" alt="" src="logo/LGO2015_2.png" align="middle">
              <br>
            </div>
            <br>
          </div>
          <br>
          <br>
          <br>
          <br>
          <br>
        </div>
      </div>
      <div id="right">
        <br>
      </div>
    </div>
    <div id="navigations">
      <div id="left">
        <div style="text-align: center;" id="nav1">
          <div style="text-align: left;">HomeStoreBlogContactFAQ
            <br>
          </div>
          <br>
        </div>
      </div>
      <div id="right">
        <div style="text-align: right;" id="n2">
          <img style="width: 18px; height: 18px;" alt="" src="images/user.png" align="top" vspace="5">My Account
          <img style="width: 18px; height: 18px;" alt="" src="images/basic1-136_heart_favorite_list-128.png" align="top" vspace="5">My wishlist
          <img style="width: 24px; height: 24px;" alt="" src="images/36.png" align="top" vspace="5">Checkout
          <img style="width: 21px; height: 21px;" alt="" src="images/checkout-empty-128.png" align="top" vspace="5">Cart
          <img style="width: 18px; height: 18px;" alt="" src="images/protection_lock-512.png" align="top" vspace="5">Login
          <br>
          <br>
          <br>
        </div>
      </div>
    </div>
    <div style="text-align: left;">
      <img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
      <img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
      <img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
      <img style="width: 289px; height: 289px;" alt="" src="images/260277245_f6dca38e3413.jpg">
      <br>
    </div>
    <br>
    <br>
    <br>
    <br>
    <div id="store_content">
      <div id="left_st">
        <div id="category">category left</div>
      </div>
      <div id="right_st">
        <div id="products">products left</div>
      </div>
    </div>
    <div id="footers">
      <div id="left">
        <div style="text-align: center;">
          <div style="text-align: left;">SERVICE
            <br>Contact Us
            <br>Blog
            <br>FAQ's
            <br>Customer Rewards Program
            <br>
          </div>
          <br>
          <br>
          <br>
          <br>
          <br>
        </div>
      </div>
      <div id="right">
        <div style="text-align: right;" id="f2">ABOUT MEB ZONE
          <br>Shipping &amp; Payment
          <br>Terms Of Service
          <br>Return Policy
          <br>Privacy Policy
          <br>Company Information
          <br>
        </div>
      </div>
    </div>
    <div id="bottom_footer">
      <br>
      <div style="text-align: center;">
        Copyright © 2015 Meb Zone.com All rights Reserved.
        <br>
      </div>
      <br>
    </div>
  </div>
</body>

Upvotes: 0

Views: 84

Answers (1)

Mr. JaWapa
Mr. JaWapa

Reputation: 90

I think your problem is from the body.

Try this:

body {
  padding:0;
  margin:0;
}

or this..

<body style="margin:0; padding:0"> 
   (all your stuff here) 
</body>

Upvotes: 1

Related Questions