CSS - Problem With Positioned Div Using Position: Relative;

Okay I learned html/css about two years ago, and haven't really used it much since. but I'm trying to get back into it and have run into a problem with my design.

Basically what I have is a DIV tag in the index that is used to center everything on the page, and provide a border. Basically what I wanted to do was add buttons that I made in photo shop and a banner to every page I'm making, so I put them in a SSI file. That works just fine, but what I'm trying to do is make them positioned relatively positioned to the DIV in the index but still have them in the SSI file, but every time I try to add the styles to either my SSI file, style sheet for the index page, or right to the main index it wont position them inside the div.

Sorry if that really didn't make sense. If you need an example take a look at the texts from last night home page (sorry it wont let me include a url) and I'm trying to get it kinda like that but with the buttons along the top of that centered outlined portion, and the banner above that.

I'm really stumped here, ladies and gentlemen, so if anyone has any idea how I can get this working that would be amazingly helpful. And if I missed anything you need to know just let me know, its pretty late and I can't really think straight right now, haha

Thanks in advance.

I have having issues with IE displaying my page wrong.

The page is http://]http://tampabay-online.org/cetr/about.php (or any page within that site)

and the css can be found at
http://tampabay-online.org/cetr/cetr.css

It displays fine in Firefox and Opera but IE makes the content class lower from the top than the #right navigation bar (they should both be 20 pixels form the top)

Any help much appreciated.

Code:

.content {
	position:relative;
	width:320px;
	margin-left: 125px;
	margin-top: 20px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:3;
}

#right {

	position:absolute;
	width:200px;
	top:20px;
	left:500px;
	border:1px solid black;
	background-color:white;
	padding:10px;
	z-index:1;

}

Im working on a project that required some css that I'm not used to using to pull off an effect.

here is the url
http://www.staging.crea8te.com/ftea

I'm having one issue:

Issue:
the basic structure is
<div1>position: relative
<subdiv></div>position:absolute
<subdiv></div>position:absolute
</div>
<div2>
</div>
<div3
</div>

I'm not a pro at using positioning by any means with something like this and I don't understand why div2 is sitting at the top instead of at the bottom of div1. div 2 and 3 display correctly .. just arent showing up at the bottom of div1

i can paste the html and css if necessary it is just kind of a lot and didnt want to have a huge post.... any ideas?

Hi, I'm following a tutorial and I would like to understand the position functioning.
I have a box container and some elements in. In the css, the are all set relative position. I don't understand why the second element (AMPT) has its contain offset and third one (Writing) is not. I understand that the first element has like a reference the container box. I would sincerely glad if you can help me to understand the relative positioning.

Thanks in advance.

PS: I'm using firefox and here is the code: artefact89.free.fr/relative.html (without www)

I'm having an issue using position: relative in IE6.


Basically I'm doing this:

Code:

<style>

.class1 {
    width: 900px;
    padding: 0px;
    margin: 0 auto 0 auto;
}

.floatimg {
    position: relative;
    top: -200px;
    left: 0px;
    padding: 0px;
    margin: 0px;
}
</style>

<div class="class1">
    <img class="floatimg" src="foo.gif" />
    <p>Some text.</p>
</div>

So, basically I'm trying to move the image up a bit in the div. This works in the latest firefox and IE7, but in IE6 the image moves up, but the text does not. It stays as if the image had not been moved and this leaves a big gap.

This may or may not be a stupid question, but mostly because the sites I learn this stuff from dont really go into much detail I really have to ask...

Whats the real difference between using...
margin: 12px 0px 0px 12px
and
position: relative; top: 12; left: 12;

This is mostly concerning <div>'s that are just making boxes onscreen (which will have images/text in em). I guess you guys will wanna see code, so heres an example:

Code:

div#menu_head {
	background: #ffffff;
	float: left;
	margin: 0px 0px 0px 0px;
	width: 200px;
	height: 60px;
	font-family: verdana;
	font-size: 11px;
	border-top: 1px #000000 solid;
	border-left: 1px #000000 solid;
	border-right: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	color: #000000;
}

div#cont_head {
	background: #ffffff;
	float: left;
	 margin: 12px 0px 0px 12px; 
	width: 200px;
	height: 60px;
	font-family: verdana;
	font-size: 11px;
	border-top: 1px #000000 solid;
	border-left: 1px #000000 solid;
	border-right: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	color: #000000;
}

As you can see on #cont_head I used a margin to set it 12 pixels away from #menu_head ... If I were to change it to this instead...
Code:

div#cont_head {
	background: #ffffff;
	float: left;
	 position: relative;
        top: 12;
        left: 12; 
	width: 200px;
	height: 60px;
	font-family: verdana;
	font-size: 11px;
	border-top: 1px #000000 solid;
	border-left: 1px #000000 solid;
	border-right: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	color: #000000;
}

...then it still looks exactly the same in the browser. So I am mainly looking to know, please, which one is proper to use and why? im sorta confused on what the purpose of both margins and position:relative are specifically for.

I mean as far as I know.. position:relative; is like position:static; but allows you to take where its naturally supposed to go, and adjust it. so to me that makes sense for my situation. That's what its there for!.. but the only site i could find that shows floats being used with spacing inbetween it using margins to do so. but i mean how do i know that are right? yknow?

Your help is greatly appreciated. And maybe since I was brave enough to post this I might mention another strange thing I don't understand (compared to old, non-xhtml ways)

Code:

<div id="container">
	<div id="sub_container">
		<div id="pasta"></div>
		<div id="trees"></div>
		<div id="widget"></div>
		<div id="squirrel"></div>
	</div>
</div>

Code:

div#container {
	background: #ff0000;
	position: relative;
	margin: 0 auto 0 auto;
	width: 600px;
	border-top: 1px #000000 solid;
	border-left: 1px #000000 solid;
	border-right: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
}

div#sub_container {
	padding: 4px;
	position: relative;
}

For whatever reason that #sub_container seems to be required if I want to have padding of 4 pixels around all my content. because if i put the padding: 4px into #container instead and remove #sub_container altogether.. then the width stretches further than it is supposed to... and actually just now as I write this, I suddenly consider that maybe, like with borders, when you add padding it increases the width/height by the padding amounts. hmm maybe that must be it then I am not sure why I hadnt thought of that. I guess because it never did that with tables.
Is this new assumption correct? But then thats almost like the padding gets put onto the outside of the layer rather than the inside of the layer like before??? I'm sorry I am just a confused person I guess :P

Thank you so very much for the help.. I really do appreciate it.

-Chi

Dreamweaver.
I built a simple animated banner: two overlapped layers containing an image with their own link. Timeline to define hide/show timing.
It works fine at the top of the page (absolute position)

Now I need to place the animation in the row #11 of a dynamic table.
In CSS Rules I set "relative" position for these two layers and they are shown inside row #11. Timeline is played but layers are not overlapping. I've tried some settings but I get always the same.
Any idea on how overlap theese two layers with relative position?
Thank you in advance.

The code below displays the boxes i want but i do not understand why those that could be aligned to left are not aligned.

I would like to have those boxes to be aligned to the left.

Any help is appreciated.

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title></title>
<style type="text/css">


div {
	position: relative;
	width: 10em;
	padding: 0.25em;
	margin: 0.25em;
    border: 1px solid black;
	text-align: center;
	overflow: auto;
	float: left;
}

</style>
</head>
<body>
    <div style="top: 0em; height: 2em;"> 8 pm</div>
    <div style="top: 5em; height: 2em;"> 9 pm</div>
    <div style="top: 10em; height: 2em;">10 pm</div>
    <div style="top: 8em; height: 5em;">Box A</div>
    <div style="top: 9em; height: 5em;">Box B</div>
</body>
</html>

Hello

I'm hoping a CSS guru will be able to help me out. I'm thinking this is a simple question, but CSS is not my strength.

I have a three column layout. First column is going to contain RSS feed headline, second column is the main site content and the third column is meant for ads. As it stands now, the first column and the third column are slowing the page load, since they use javascript to suck in RSS (for the headline) and phpAdNew for the the Ads. What I'd like to do is create a div at the bottom of the page, so these load last and then are positioned relatively to those columns? I hope that makes sense. I'm not sure how to move position after page load.. almost seems like I need to make a layer within a layer or something??

This is an example of what I'm trying to do:

Code:

<html>
<head>
	<title>Test</title>
</head>
<table cellpadding=0 cellspacing=0 border=0 valign="top">
<tr>
	<td width=100>
	<!-- headline rss feed javascript -->
	</td>
	<td width=500>
	<!-- main content -->
	</td>
	<td width=100>
	<!-- phpAdNew javascript -->
	</td>
</tr>
</table>
<div id="headline">
<script language="javascript" src="http://www.domain.com/path/to/headline.js></script>
<!-- I'd like this to be placed in column 1 -->
</div>
<div id="ads">
<script language="javascript" src="http://www.domain.com/path/to/ad.js></script>
<!-- I'd like this to be placed in column 3 -->
</div>
</body>
</html>

Anyways, any help is greatly appreciated. Let me know if you need any additional information from me, etc.

Thanks!
hanji

I want to create a div that goes right under an input, I can get it to look fine in FF but not IE using absolute positioning.

Is there anyway I can position the new div relative to the input rather relative to containers around it?

I am a newbie to CSS and HTML
I am trying to understand how div positioning works
I made a CSS and a class container where I did put some thing
now I made another class say named useful which is placed inside div tags of class container white I am finding problem is when the next div element of class useful is placed then its position is not coming as I desire

some one told me to use float to over come it worked when I used an image but it did not worked when it was not an image here are the contents of my CSS about which I am asking



.header_container {
margin:auto;
height:101px;
width: 1290px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: #D5EDB3;
border-right-color: #D5EDB3;
border-bottom-color: #D5EDB3;
border-left-color: #D5EDB3;
}

.header {
background-image: url(n/mm_health_photo.jpg);
height: 101px;
width: 382px;
}

.header1 {
position:relative;
background-color: #D5EDB3;
height:101px;
width: 908px;
float:left;
border-left-color:#999900;
border-left-width: thin;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: solid;
margin-left: 381px;
margin-top: -101px;

}


Now the problem is in above CSS margin-left and margin-top has been used which I dont think is needed following is my html code

<!-- Header Container Startts -->
<div class="header_container" >
<div class="header"> </div> <!-- header container left image in this box -->
<div class="header1"></div> <!-- the right side of header -->
</div>
<!--Header Finishes here -->

Hello,

I've been trying to find a solution to this on the board already but nothing quite answers what Im trying to do.

I have a layer that opens from this css:

Code:

#helplayeropen {

	margin-top: auto;
	margin-right: auto;
	float: right;
	position: relative;
	right: 0px;
	top: 80%;
	z-index: auto;
	visibility: hidden;
}

The problem is that if the page is scrollable, when you scroll to the bottom and open the layer, it opens the layer 80% from the top of the original screen, not the new view of the page. 80% from the real top, not 80% from the top of your current view of the page.

Is there any way to get the layer to open 80% from the top of the screen that you are viewing and not from the absolute top.

Heres an example of whats going on Go here and click on the help chilli (right floating layer)