Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Div positioning problem.

    I'm trying to make a simple layout but of course things are going wrong again.

    This is my HTML code:

    Code:
    <body>
    
    	<div id="container">
    	
    		<div id="body">
    		
    			<div id="uppernav">
    			</div>
    			
    			<div id="content">
    			</div>
    			
    			<div id="leftnav">
    			</div>
    		
    		</div>
    	
    	</div>
    	
    	<footer></footer>
    
    </body>
    This is my CSS:

    Code:
    body{
    	background: #d5d5d5;
    }
    
    #body{
    	width: 1100px;
    	background: url('../images/backgroundcontent.gif');
    	height: 600px;
    	margin: 0 auto 0 auto;
    }
    
    #uppernav{
    	width: 900px;
    	background: #000000;
    	height: 60px;
    	margin: 0 auto 0 auto;
    }
    
    #content{
    	width: 680px;
    	background: yellow;
    	height: 400px;
    	margin: 70px 40px 0 40px;
    	float: left;
    }
    
    #leftnav{
    	width: 300px;
    	background: blue;
    	height: 400px;
    	margin: 70px 40px 0 0;
    	float: left;
    }
    
    footer{
    	background: red;
    	position: fixed;
    	bottom: 0;
    	height: 30px;
    	width: 100%;
    }
    This is the result I get.

    Now what should be fixed:

    1. The black bar (called uppernav) should be placed a couple of pixels lower, but when I try to edit the margin it won't work, and placing "top: 100px" e.g. in the CSS won't work either.

    2. There is a little bit of space on the left which is not covered by the footer, even though I used width: 100%.

    3. The dark grey box called body leaves a few pixels at the top. It should start immediately at the top.

    4. The dark grey box should cover the entire height of the website.

    I hope someone could help with something of this. Sorry if it sounds confusing.

    Greetings.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello apotd,
    Your #uppernav won't margin down because of collapsed margins.

    The space on the left is the default margin on body.
    Zero that out with this -
    Code:
    body {
    margin: 0;
    background: #d5d5d5;
    }
    #3 ... same fix as #2

    See this example of a full height layout.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Problem 2 of 3 got fixed by the margin: 0;. But I still can't get the uppernav to move down. When I use margin, the top of my layout does not include the dark grey background anymore.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Let's see your updated code.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    body{
    	background: #d5d5d5;
    	margin: 0;
    }
    
    #body{
    	width: 1100px;
    	background: url('../images/backgroundcontent.gif');
    	height: 600px;
    	margin: 0 auto 0 auto;
    }
    
    #uppernav{
    	width: 900px;
    	background: #000000;
    	height: 60px;
    	margin: 100px auto 0 auto;
    }
    
    #content{
    	width: 680px;
    	background: yellow;
    	height: 400px;
    	margin: 70px 40px 0 40px;
    	float: left;
    }
    
    #leftnav{
    	width: 300px;
    	background: blue;
    	height: 400px;
    	margin: 70px 40px 0 0;
    	float: left;
    }
    
    footer{
    	background: red;
    	position: fixed;
    	bottom: 0;
    	height: 30px;
    	width: 100%;
    }

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Read my first post about the collapsing margins...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Oh so the 0 was not for the collapsed maps? Do you mean I have to do this: http://www.complexspiral.com/publica...psing-margins/ to fix the problem?

  • #8
    New Coder
    Join Date
    Nov 2011
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try placing a universal selector at the top of your stylesheet:

    * {
    margin: 0;
    padding: 0;
    border: 0;
    }

    It's common practice to do this, as browsers have different defaults. Lame right?

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by apotd View Post
    Oh so the 0 was not for the collapsed maps? Do you mean I have to do this: http://www.complexspiral.com/publica...psing-margins/ to fix the problem?
    Add this bit highlighted in red:

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <style type="text/css">
    body {
    	margin: 0;
    	background: #d5d5d5;
    }
    #body {
    	width: 1100px;
    	margin: 0 auto;
    	overflow: auto;
    	background: #0f0 url('../images/backgroundcontent.gif'); 
    }
    #uppernav {
    	height: 60px;
    	width: 900px;
    	margin: 10px auto 0;
    	background: #000;
    }
    #content {
    	height: 400px;
    	width: 680px;
    	margin: 70px 40px 70px 40px;
    	float: left;
    	background: #ff0;
    }
    #leftnav {
    	height: 400px;
    	width: 300px;
    	margin: 70px 40px 70px 0;
    	float: left;
    	background: #00f;
    }
    footer {
    	height: 30px;
    	width: 100%;
    	position: fixed;
    	bottom: 0;
    	background: #f00;
    }
    </style>
    </head>
    <body>
            <div id="container">
                <div id="body">
                    <div id="uppernav"> </div>
                    <div id="content"> </div>
                    <div id="leftnav"> </div>
                <!--end body--></div>
            <!--end container--></div>
        <footer></footer>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I added the overflow, and everything seems to be fixed now, but my background from #body still won't cover everything. I don't really seem to understand why.

    http://i40.tinypic.com/25ioeaa.gif

  • #11
    New Coder
    Join Date
    Nov 2011
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't understand what you mean? What is your background image of? At the moment I'm just seeing a grey background.

    Remember you have a fixed height on the content and side bar.

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,671
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning aptod,
    Are you wanting a full height layout? It takes some extra coding to make a layout fill the viewport even when there is not enough content.

    Look at my very first reply in this thread. I gave you a link to an example of a full height layout.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #13
    New Coder
    Join Date
    Oct 2011
    Posts
    81
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tried to take a look at the CSS of the full-height layout and changed my code to this:

    Code:
    *{
    	margin: 0;
    	padding: 0;
    }
    
    body{
    	background: #d5d5d5;
    	margin: 0;
    }
    
    #body{
    	width: 1100px;
    	background: url('../images/backgroundcontent.gif') repeat-y;
    	overflow: auto;
    	min-height: 100%;
    	position: relative;
    	margin: 0 auto -30px auto;
    }
    
    #uppernav{
    	width: 900px;
    	background: #000000;
    	height: 60px;
    	margin: 150px auto 0 auto;
    }
    
    #content{
    	width: 750px;
    	background: yellow;
    	height: 400px;
    	margin: 40px 40px 0 40px;
    	float: left;
    	overflow: hidden;
    	padding: 20px 20px 20px 20px;
    	-moz-column-count: 3;
    	-moz-column-gap: 22px;
    	-webkit-column-count: 3;
    	-webkit-column-gap: 22px;
    	column-count: 3;
    	column-gap: 22px;
    }
    
    #rightnav{
    	width: 170px;
    	background: blue;
    	height: 420px;
    	margin: 40px 40px 0 0;
    	float: left;
    	padding: 10px 10px 10px 10px;
    }
    
    footer{
    	background: red;
    	position: fixed;
    	bottom: 0;
    	height: 30px;
    	width: 100%;
    }
    It seems the min-height does not work. My "#body" is the same as their "wrap" in the example, right?

    And @ obenns, I mean the dark grey background. I know the content and navigation have a fixed height, but the #body (my "wrapper") does not.

  • #14
    New to the CF scene
    Join Date
    Oct 2011
    Location
    Rangpur, BD
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I hope htmlcodetutoria web site help you.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •