HTML Div Positioning

Semajnad · 12-11-2011, 09:41 PM

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.

Excavator · 12-11-2011, 09:55 PM

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>

Excavator · 12-11-2011, 09:58 PM

Quote:

Originally Posted by Semajnad

That's my website so far - http://www.mycraftserver.co.uk/website/

Fixed your link

Semajnad · 12-11-2011, 10:02 PM

Quote:

Originally Posted by Excavator

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

adockery · 12-12-2011, 01:26 AM

Thanks for writing this out. It is a definite help for me as well.

Quote:

Originally Posted by Excavator

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>