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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Positioning DIV within centered body tag

    Hi peeps,

    I'm relatively new to coding, so please be gentle.

    How do I position a div tag within the body tag of the following code? For example, if I want a div tag to be positioned 50px to the left and 50px to the right of the body tag (which is centered), how do I make this happen? Currently, I know how to position div tags in relation to the browser window, but am struggling to figure out how to position it in relation to the centered body tag.

    Thanks in advance!

    Code:
    <html>
    <head>
         <title>Mistral Cigale</title>  
        <style type="text/css">
    <!--
    body{text-align:center;}
    div{width:950px;height:1000px;background-color:red;margin:0 auto;}
    -->
    </style>
       </head>  
    
        <body>
            <div></div>
        </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    <!DOCTYPE html>
    <html>
    <head>
         <title>Mistral Cigale</title>  
        <style type="text/css">
    	*{
    	margin:0;
    	padding:0;
    	}
    body{text-align:center;}
    #wrap{
    padding:0 50px;
    }
    #wrap div{height:1000px;background-color:red;}
    </style>
       </head>  
    
        <body>
    		<div id="wrap">
    			<div></div>
    		</div>
        </body>
    </html>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi abduraooft!

    Thanks for the reply!

    However, as I'm still a 'noob' to the world of coding, I'm still struggling as to what CSS code I should be using for the DIV that goes inside the 'wrap' DIV.

    Currently I have:

    Code:
    <style type="text/css">
    #content{
    	position:absolute;
    	left: 50px;
    	width:100px;
    	top: 50px;
    	height: 150px;
    }
    </style>
    
    <div id="content"></div>
    However, this doesn't work for me.

    Sorry for being a nuisance.

  • #4
    New to the CF scene
    Join Date
    May 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My code, at the moment, is below. But that is obviously wrong. Can you help me fix the code please?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
         <title>Mistral Cigale</title>  
        <style type="text/css">
    	*{
    	margin:0;
    	padding:0;
    	}
    body{text-align:center;}
    #wrap{
    padding:0 50px;
    }
    #wrap div{height:1000px;background-color:red;}
    
    #content{
    	position:absolute;
    	left: 0px;
    	top: 80px;
    	height: 150px;
    }
    </style>
       </head>  
    
        <body>
    		<div id="wrap">
    			<div id="content">fff</div>
    		</div>
        </body>
    </html>

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    However, this doesn't work for me.
    That's not the way to achieve your goal.

    Have you tested the code in my above post? Anything wrong with that?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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