Odd DIV issue

Discussion in 'Web Design' started by Ampix0, Feb 18, 2013.

  1. Ampix0

    Ampix0 Power Member

    Joined:
    Jan 10, 2012
    Messages:
    527
    Likes Received:
    60
    Home Page:
    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?
     
  2. cgimaster

    cgimaster Power Member

    Joined:
    Jun 30, 2012
    Messages:
    526
    Likes Received:
    311
    Gender:
    Male
    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.
     
  3. Ampix0

    Ampix0 Power Member

    Joined:
    Jan 10, 2012
    Messages:
    527
    Likes Received:
    60
    Home Page:
    Yup all. Firefox, Dreamweaver, Chrome.
     
  4. cgimaster

    cgimaster Power Member

    Joined:
    Jun 30, 2012
    Messages:
    526
    Likes Received:
    311
    Gender:
    Male
    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.
     
    Last edited: Feb 20, 2013