CODEWITHSUNDEEP
jquerycsshtmlweb
DiscipleDavid
DiscipleDavid

Reputation: 85

Div container not centering with margin auto

I am having issues centering my container on my website. I want this container to be centered and cover about 80% of the page. So that I can place an image slider and text within it. Margin: 0 auto, doesn't seem to be working. The background-color of the container only shows when position is set to absolute. What am I doing wrong here?

CSS

@charset "utf-8";
/* CSS Document */

#container {
top: 125px;
left: 0;
margin: 0 auto;
width: 70%;
background-color: #b0e0e6;
height: 100%;
position: absolute;
}

#header {
background-color: #2f2f2f;
height: 125px;
top: 0;
left: 0;
position: fixed;
width: 100%;
margin: none;
padding: none;
z-index: 1;
}

#footer {
background-color: #2f2f2f;
height: 30px;
bottom: 0;
left: 0;
position: fixed;
width: 100%;
margin: none;
padding: none;
z-index: 1;
}

#logo {
position: fixed;
z-index: 2;
}

#logo img {
height: 100px;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
</head>

<body>

<div id="logo"><img src="images/jpl101-300x254.png" /></div>
<div id="header"></div>
<div id="footer"></div>


<div id="container">




</div>
</body>
</html>

This is what I'm ending up with compared to what I am trying to do.

enter image description here

enter image description here

Upvotes: 0

Views: 1218

Answers (5)

Fergoso
Fergoso

Reputation: 1582

Wrap your div and then center.

Example Fiddle

css:

.containerWrapper{
    width: 100%;
    height: 100%;
    position: absolute;
}
#container {
 margin: 0 auto;
 width: 70%;
 background-color: #b0e0e6;
 height: 100%;
 position: relative;
}

html:

<div class="containerWrapper">
    <div id="container"></div>
</div>

Upvotes: 0

eyegropram
eyegropram

Reputation: 672

You just need to add a right:0; to your container to force the margin to "bind" to the right side of the screen and auto fill the margin.

Upvotes: 1

Adam Jenkins
Adam Jenkins

Reputation: 55613

You have it set to position: absolute which means it will only center with margin: 0 auto if you also set: left:0;right:0;

div { 
    padding: 10px; 
    background: #2d2d2d; 
    color: #fff; 
    font-weight: bold; 
    text-transform: uppercase; 
}

.center {
    position: absolute;
    margin: 0 auto;
    width: 70%;  
}

.one { left:0; }

.two {
    left:0; right:0;
    top: 200px; /* so you can see it */
}
<div class="center one">First</div>
<div class="center two">Second</div>

Really though, it looks like you shouldn't be using position: absolute here at all.

Upvotes: 2

volter9
volter9

Reputation: 735

You need to use margin-top instead of position: absolute in conjunction with top:

#container {
    margin: 0 auto;
    margin-top: 125px;
    width: 70%;
    background-color: #b0e0e6;
    height: 100%;
}

Basically those positions and margins don't really work together very well.

Upvotes: 0

user1133297
user1133297

Reputation:

Try with (change the margin to percents)

#container {
margin: 0 15%;
width: 70%;
background-color: #b0e0e6;
height: 100%;
}

you have a width 70% so from the remaining 30%, you divide it by 2, 15% from each side (left and right) and it's done. Here is something similar

Upvotes: 1

Related Questions