Why div.contentWrapper sticks left (margin: 0 auto)?

Why div.contentWrapper sticks left (margin: 0 auto) (Firefox, Cromium)? It’s supposed to be centered! Please, help!

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Default</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
		<header>
			<div class="inHeader">
				<h1>canvass</h1>
				<h5>By Free CSS Templates</h5>
			</div>
		</header>
		<div class="contentWrapper">
			<div class="mainContent"></div>
			<div class="sidebars">
				<div class="sidebarOne">
					<div class="img04">
						<h5 class="h5One">menu</h5>
					</div>
					<ul>
	        			<li><a href="">Home</a></li>
	        			<li><a href="">Blogs</a></li>
				        <li><a href="">Photos</a></li>
				        <li><a href="">Links</a></li>
				        <li><a href="">About</a></li>
				        <li><a href="">Contact</a></li>
				    </ul>
			    </div>
			    <div class="sidebarTwo">
			    	<div class="img05">
	    				<h5 class="h5Two">categories</h5>
	    			</div>
	    			<ul>
				        <li>6/15: <a href="">Donec dictum metus lorem ipsum …</a></li>
				        <li>6/12: <a href="">Etiam rhoncus volutpat lorem ipsum…</a></li>
				        <li>6/9: <a href="">Integer gravida nibh lorem ipsum…</a></li>
				    </ul>
			    </div>
				<div class="sidebarThree">
	    			<div class="img06">
	    				<h5 class="h5Three">archives</h5>
	    			</div>
	    			<ul>
				        <li><a href="">June 2007 (2)</a></li>
				        <li><a href="">May 2007 (31)</a></li>
				        <li><a href="">April 2007 (30)</a></li>
				    </ul>
			    </div>
			</div>
		</div>
		<footer>
				<div class="inFooter">
					<div class="imgHelp"></div>
					<p class="littleH">сanvass</p>
					<p>© 2007. Designed by <a href="">Free CSS Templates
					Privacy Policy</a> | <a href="">Terms of Use</a> | <a href=""  class="freands">XHTML</a> | <a href="" class="freands">CSS</a></p>
				</div>
		</footer>
</body>
</html>

css/style.css

    * {
	box-sizing: border-box; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;    
}
/************ contentWRAPPER ************/

.contentWrapper {
	width: 760px;
	height: 420px;
	margin: 0 auto;
	overflow: hidden;
}

/************ HEADER ************/

header img {
	width: 960px;
	height: 150px;
	margin-top: 1px;
}
.inHeader {
	margin: 0 auto;
	width: 760px;
	height: 150px;
	background: url(../img/img02.gif) no-repeat;
}
header {
	width: 100%;
	border-bottom: 8px solid black;
	background: #f2f2f2;
	height: 130px;
}
.inHeader h1 {
	font-size: 55px;
	float: left;
	margin-top: 70px;
	margin-bottom: 0;
	margin-left: 40px;
	height: 60px;
}
.inHeader h5 {
	float: right;
	margin-top: 109px;
}

/************ mainCONTENT ************/

.mainContent {
	width: 570px;
	height: 420px;
	background: yellow;
	float: right;
}

/************ SIDEBARS ************/

.sidebars {
	width: 190px;
	height: 420px;
	float: left;
}
.sidebarOne li a,li {
	text-decoration: none;
	font-size: 13px;
	list-style: none;
}
.sidebarTwo li a,li {
	text-decoration: none;
	font-size: 13px;
	list-style: none;
}
.sidebarThree li a,li {
	text-decoration: none;
	font-size: 13px;
	list-style: none;
}
.sidebarOne a {
	background: url(../img/img07.gif) no-repeat;
}
.sidebarTwo li {
	background: url(../img/img07.gif) no-repeat;
}
.sidebarThree a {
	background: url(../img/img07.gif) no-repeat;
}
.sidebarOne ul {
	background: url(../img/img10.gif) no-repeat;
	margin: 0;
}
.sidebarThree ul {
	margin: 0;
}
.sidebarTwo ul {
	margin: 0;
}
.img04 {
	background: url(../img/img04.gif) no-repeat;
	width: 91px;
	height: 55px;
	background-size: 71px;
	margin-top: 34px;
}
.img05 {
	background: url(../img/img05.gif) no-repeat;
	width: 43px;
	height: 56px;
	background-size: 41px;
}
.img06 {
	background: url(../img/img06.gif) no-repeat;
	width: 46px;
	height: 39px;
	background-size: 41px;
}
.sidebars h5 {
	margin: 0;
}
.h5One {
	padding-top: 13px;
	padding-left: 32px;
}
.h5Two {
	padding-top: 25px;
	padding-left: 43px;
}
.h5Three {
	padding-top: 17px;
	padding-left: 35px;
}


/************ FOOTER ************/

footer {
	width: 100%;
	height: 130px;
	background: black;
	clear: both;
}
.inFooter {
	margin: 0 auto;
	width: 210px;
	height: 69px;
	padding-top: 16px;
}
.imgHelp {
	margin: 0 auto;
	width: 37px;
	height: 24px;
	background: url(../img/img12.gif) no-repeat;
}
footer p {
	margin: 0 auto;
	font-size: 10px;
	color: #414856;
	width: 210px;
}
footer a {
	color: #9e9c9c;
	text-decoration: none;
}
.littleH {
	font-size: 20px;
	color: #414856;
	width: 73px;
}
.freands {
	border-bottom: 1px dotted white;
}

Your header element is only set to 130px height, while the contents are set to 150px. This is causing snagging in the elements below.

Try to avoid setting heights. It’s too rigid for the web, which is a fluid medium.

Assign .inHeader h5 {margin-bottom:0}. That should clear the snag.

(I was clueless and would not have found it without @Ralphm’s hint)

Ditto, avoid fixed heights.

Thanks! I agree. But I changed the height of the header to 160px, but it didn’t solve the problem.

Thanks! I agree. But I did it, but it didn’t solve the problem.

In that case, there is something more that we don’t know.

Can you post a link to the site? or repost your code as a working page?

Hi, thanks, but I think that the problem is about how all the css done. Floats in the header are not cleared, heights of the child div bigger than that heights of the parent. There are a lot of other small mistakes. We will have to redo everything. Thank you guys for the insights!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.