1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Odd DIV issue

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

  1. Ampix0

    Ampix0 Power Member

    Joined:
    Jan 10, 2012
    Messages:
    525
    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:
    525
    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:
    525
    Likes Received:
    60
    Home Page:
    Yup all. Firefox, Dreamweaver, Chrome.
     
  4. cgimaster

    cgimaster Power Member

    Joined:
    Jun 30, 2012
    Messages:
    525
    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