CHBresser
CHBresser

Reputation: 181

Unable to center div properly

I am trying to center a div inside of a div. Instead, its shaded to the right. I have tried all combinations of positions. I tried everything I found in other threads and have not been able to fix this. This is how it looks: https://jsfiddle.net/L13qa1tr/

content_page.html:

<div id="wrapper">
      <div id="main-content" class="container">
          <h1 class="text-center">This is a test, remove before release.This is a test, remove before release.This is a test, remove before release.</h1>
      </div>
</div>

Relevant CSS, content_page.css:

body {
  font-family: 'Lora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  top: 61px;
  width: 100%;
  height: 100%;
  color: white;
  background-color: black; }

html {
  width: 100%;
  height: 100%; }

h1 {
  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  margin: 0 0 35px;
  letter-spacing: 1px;
  text-transform: uppercase; }

#wrapper{
    background-color: #555555;
    width: 100%;
    height: auto;
    padding: 5px;
    margin: 0 auto;
}
#main-content {
    position: relative;
    top: 32px;
    left: 88px;
    right: 88px;
    bottom: 32px;
    background-color: #E1E1E1;
    height: auto;
    box-sizing: border-box;
    margin-right: auto;
    margin-left: auto;
}

I can post any other information needed, just let me know. If anyone can point me in the right direction that would be great. The part that also confuses me is that the width of the inner div should be 100% so it would make sense if it took up all of the space, but in this case it isn't taking up enough.

Upvotes: 0

Views: 57

Answers (3)

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Well that was a part of your issue, that you were moving the div using

position:relative and adding top,left,right and bottom.

Instead all you are supposed to add is margin:auto. Width is reduced just for bring the content in the center.

#main-content {
  width:600px;
  margin:auto;
  background-color: #E1E1E1;
}

Upvotes: 0

davvv
davvv

Reputation: 792

If you are trying to center your #main-content div, here is how you can do it.

#main-content {
    position: relative;
    width: 80%;
    width:calc( 100% - 88px - 88px);
    margin-left: auto;
    margin-right: auto;
    background-color: #E1E1E1;
    height: auto;
}

The calc method is just using your left and right peramters. You can remove this and just use the percent, which will still align it in the middle.

To center a div you need to set a width, followed by automatic margins on the left and right:

margin-left: auto;
margin-right: auto

See this updated fiddle.

Upvotes: 1

Michelle Cantin
Michelle Cantin

Reputation: 573

There is a lot of unnecessary code in there. I removed a lot of it.

The margin: 0 auto; needs to be placed inside the #main-content to center it instead of the #wrapper. I changed the width to show you that it works.

body {
  font-family: 'Lora', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  position: relative;
  top: 61px;
  color: white;
  background-color: black; }

h1 {
  font-family: 'Cabin', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  margin: 0 0 35px;
  letter-spacing: 1px;
  text-transform: uppercase; }

#wrapper{
    background-color: #555555;
    padding: 5px;
}
#main-content {
    position: relative;
    top: 32px;
    background-color: #E1E1E1;
    box-sizing: border-box;
    margin: 0 auto;
    width: 50%;
}
<div id="wrapper">
      <div id="main-content" class="container">
          <h1 class="text-center">This is a test, remove before release.This is a test, remove before release.This is a test, remove before release.</h1>
      </div>
</div>

Upvotes: 2

Related Questions