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
    Dec 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post HTML Div Positioning

    Hello,
    Im not very experienced with HTML and am just trying to get a simple website going.
    I have a div, which is my main body of my page and inside that I have a second div which holds a twitter feed and a title. I want to be able to position that at an exact point inside that div so it never moves. However it needs to move when the main div moves as I have the left and right margin as auto so it stays centred in the page.

    If anyone can help me with this it would be great, and if this is confusing please tell me.
    Thanks,
    -Daniel

    That's my website so far - http://http://www.mycraftserver.co.uk/website/
    You can view my css at http://www.mycraftserver.co.uk/website/script/main.css
    The twitter title (sideways image "follow us on twitter" is a.twitter, which is held, with the feed, in div.twitter. I want both the div.twitter to be positioned eactly inside div.mainbody and not to move.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Semajnad,
    Your link didn't work but I think we can sort one issue without seeing your site.

    To get your absolute positioned element to move with it's parent container, make that parent position: relative;

    Like this example -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	height: 600px;
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	position: relative;
    }
    #secondDiv {
    	height: 300px;
    	width: 300px;
    	position: absolute;
    	top: 25px;
    	left: 25px;
    	background: #f00;
    }
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="secondDiv">
            	Twitter feed and Title
            <!--end secondDiv--></div>
        <!--end container--></div>
    </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

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Semajnad View Post
    That's my website so far - http://www.mycraftserver.co.uk/website/
    Fixed your link
    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

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Semajnad,
    Your link didn't work but I think we can sort one issue without seeing your site.

    To get your absolute positioned element to move with it's parent container, make that parent position: relative;

    Like this example -
    Ahh thank you, I'll give that a go.
    -Semajnad

  • #5
    New to the CF scene
    Join Date
    Dec 2011
    Location
    Atlanta, GA
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for writing this out. It is a definite help for me as well.

    Quote Originally Posted by Excavator View Post
    Hello Semajnad,
    Your link didn't work but I think we can sort one issue without seeing your site.

    To get your absolute positioned element to move with it's parent container, make that parent position: relative;

    Like this example -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	height: 600px;
    	width: 800px;
    	margin: 30px auto;
    	background: #999;
    	position: relative;
    }
    #secondDiv {
    	height: 300px;
    	width: 300px;
    	position: absolute;
    	top: 25px;
    	left: 25px;
    	background: #f00;
    }
    </style>
    </head>
    <body>
        <div id="container">
        	<div id="secondDiv">
            	Twitter feed and Title
            <!--end secondDiv--></div>
        <!--end container--></div>
    </body>
    </html>


  •  

    Tags for this Thread

    Posting Permissions

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