Odd DIV issue

Ampix0 · Feb 18, 2013

I had to make this temporary fix in the CSS to stop this from happening.

Here is the html

Code:

<!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" />
<title>ProxyAssassin</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id="header"><img src="img/logo.jpg" alt="Proxy Assassin Logo" id="logo" /></div>


<div id="mid_container">


<div id="box"></div>


</div>


<div id="lower_content"></div>


<div id="footer"></div>
</body>
</html>

Here is the CSS

Code:

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


Body {margin:0px; padding:0px; overflow:auto;}
#header {width: 100%; height:120px; background-color:#FFF;}
#logo {margin-left: auto;   margin-right: auto; display: block;}
#mid_container {width: 100%; height: 400px; background-color:#333; display:block; margin-top:0px; position:absolute;}
#box {display:block; width: 800px; height: 350px; background-color:#FFF; margin-left:auto; margin-right:auto; margin-top: 25px; box-shadow: 10px 10px 15px #111;}
#lower_content {
	position: absolute;
	display: block;
	width: 100%;
	height: 300px;
	background-color: #FFF;
	top: 520px;
	
}
#footer {
	position: absolute;
	display: block;
	width: 100%;
	top: 820px;
	height: 80px;
	margin-bottom: 0px;
	background-color: #000;
}

As you can see I manually moved down #footer and #lower_content. For some reason if you don't, they stack on top of eachother, on top of the mid_container and sit right under the header. What's going on?

cgimaster · Feb 19, 2013

Does it happens on all browsers or are you targeting a specific browser only ?

You seem to be defining even the top position so this really shouldn't happen, let me know if you are testing it on a specific browser and I will take a look.

Ampix0 · Feb 20, 2013

Yup all. Firefox, Dreamweaver, Chrome.

cgimaster · Feb 20, 2013

Code:

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

body {
    margin:0px;
    padding:0px;
    overflow:auto;
}

#header {
    width: 100%;
    height:120px;
    background-color:#FFF;
}

#logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#mid_container {
    width: 100%;
    height: 400px;
    background-color:#333;
    display:block;
    padding-top: 40px;
}

#box {
    display: block;
    width: 800px;
    height: 350px;
    background-color:#FFF;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 10px 10px 15px #111;
}

#lower_content {
    display: block;
    width: 100%;
    height: 300px;
    background-color: #FFF;
}

#footer {
    display: block;
    width: 100%;
    height: 80px;
    margin-bottom: 0px;
    background-color: #000;
}

Gave it a small check and this seems to work for me however there is small issue with the #box not properly positioning that can be fixed with padding.

EDIT: to resolve the issue with positioning of the box you can use the below updated version:

Code:

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

body {
    margin:0px;
    padding:0px;
    overflow:auto;
}

#header {
    width: 100%;
    height:120px;
    background-color:#FFF;
}

#logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#mid_container {
    width: 100%;
    height: 400px;
    background-color:#333;
    display:block;
    overflow:hidden;
}

#box {
    display: block;
    width: 800px;
    height: 350px;
    background-color:#FFF;
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 10px 10px 15px #111;
}

#lower_content {
    display: block;
    width: 100%;
    height: 300px;
    background-color: #FFF;
}

#footer {
    display: block;
    width: 100%;
    height: 80px;
    margin-bottom: 0px;
    background-color: #000;
}

This was tested on firefox only.

Odd DIV issue

Ampix0

Power Member

cgimaster

Power Member

Ampix0

Power Member

cgimaster

Power Member

Main Menu

Marketplace

Making Money

BlackHat World