CODEWITHSUNDEEP
htmlcss
Diar Turkmani
Diar Turkmani

Reputation: 63

Div Trying To Be Centered But Not Working

my problem is that I am trying to center a div inside my full-width header like this: 

</body>
<!-- the CSS -->
#header {
margin-top: -1em;
margin-left: -1em;
height: 2.95em;
padding:15px 0;
min-width:150%;
background-color: #F4F6F7;
border: 1px solid #E1E1E1;

}
#insideHeader {

border: 1px solid black;
width: 20em;
height: 2.6em;
margin: 0 auto;
}

The result of this code is in the here.

Thanks in advance.

Upvotes: 2

Views: 53

Answers (3)

Harshit
Harshit

Reputation: 286

give

   #header
    {
    box-sizing: border-box;
   //and remove height:2.5rem;
   }

box-sizing:borderbox will removes all your troubles, and dont give height to parent

that will automatically take the height of the inner div

Upvotes: 0

Blag
Blag

Reputation: 5894

min-width:100%; seem to centre your div...

body {
    background-color: red;
    margin: 0;
}
#header {
    margin: 0;
    height: 2.95em;
    padding:15px 0;
    min-width:100%;
    background-color: #F4F6F7;
    border: 1px solid #E1E1E1;
}
#insideHeader {
    border: 1px solid black;
    width: 20em;
    height: 2.6em;
    margin: 0 auto;
}
<body>
    <div id="header">
        <div id="insideHeader"></div>
    </div>
</body>

or http://jsfiddle.net/x1b7zpy4/1/

Upvotes: 4

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

As my understanding you are trying to fit the outer box in the window and center align the inner box.

Add/Update following styles

html, body {
    margin: 0;
    padding: 0;
}

#header {
  margin-top: -1em;
  height: 2.95em;
  padding:15px 0;
  width:100%;
  background-color: #F4F6F7;
  border: 1px solid #E1E1E1;
}

There are default padding/margin of browser. You need to override those in order to fit your outer box.

Once you do that, you need to remove your negative left margins which were put in order to make box stick to the boundary of window.

Then set the width to 100%.

For reference - http://jsbin.com/lomeganori/1/edit?html,css,output

Upvotes: 1

Related Questions