CSS - Trying To Position Two Elements Relative To One

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

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 -->

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>

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?

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)

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.

Hi folks,

Just got one of those "can I or can't I" questions that relates to position:relative and position:absolute.

I have the following structure -

Code:

<div>
   <div style="position:relative">
      <ul style="position:relative">
         <li>
           <p>

<span style="display:block"></span>
<span style="display:block"></span>
<span style="display:block; position:absolute"></span>

          </p>
        </li>
      </ul>
   </div>
</div>

The Third Span is where I am not sure about. I'd like it to sit at the bottom right of the enclosing <p>. When I use <span style="display:absolute; bottom:2px; right:2px>, the whole span disappears - not exactly sure where it vanishes to. Without the bottom and right declarations, the span stays put. There is sufficient space within the <p> for the <span> to move about. This absolute positioning worked fine without the relative div and relative ul - so I am assuming that's where my issue lies. BUT, I need the outer structure and it's not an option to change anything except the third <span>.

Question is:

Is what I am attempting going against the grain and something that just isn't going to work?

If so, what steps can I take to position the contents of the <span> where I need it? I have tried making the <span> fit the width of the <p> and then positioning the internal contents to text-align:right. I can't do a padding-top or margin-top as the content in the second span is variable.

Any clever ideas?

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

Hello

I'm running into a very simple CSS problem (IMHO). I'm hoping that someone will be able to help out.

The problem is related to a div layer that I'm positioning. The layer is positioned fine, but there is a gap at the bottom of the page where the div was created, eventhough it's positioned else where. This gap only happens in IE, FireFox looks great (no gap).

Basically the code is this:

Code:

<div id="right-footer">
<img src="images/logo_small.gif" border=0><br />
</div>

This is at the bottom of the page, above the </body></html>. I have content on the page, so scrolling is necessary. The gap is approximately 40px tall.

Here is the relevant section of the stylesheet:
Code:

#right-footer {
	position: relative;
	top: -100px;
	left: 550px;
	width: 100px;
	height: 10px;
	overflow: none;
	z-index: 100;
	padding: 0px;
	margin: 0px;
}

As you can see, the layer will be positioned above where div is in the code and pushed to the left, it's height is 10px. I added the z-index, overflow, padding, margin in a desperate attempt to fix it.

Commenting out the div block or setting position to absolute removes the gap, but my position is blown.

Any ideas? Please let me know if you need any more information or code.

Thanks!
hanji

Hello all, firstly, thank you for all you contribute to this question. I have a website (as everyone does) which has a problem (which i always do). I have an embeded flash file and 2 lines of text which are seperated into 2 different divs inside a table cell. I am using css to position these texts over the flash file, which is just fine. The only problem I am recieving is that while using the position: relative in css for these it leaves extra unneeded space under the flash file where the text would be if they were not being positioned. Here is the page wit hthe problem:

Look at the header

So I am stumped. I have posted away in other CSS forums and have received no replies at all, I have googled it many times and found the same problem, but the solution will only work for that individuals situation. So, what can be done.

Here is my html for the header cell:
Code:

<table id=main cellpadding=0 cellspacing=0>
<tr>
	<td class=head colspan=2 height=144px> 
	<param name="movie" value="test.swf"> 
	<param name="quality" value="high"> 
	<param name="wmode" value="transparent"> 
	<embed src='images/test.swf' width=762px height=144px wmode="transparent" style="z-index: 1;" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed><div class='headtitle'><? echo $title; ?></div><div class='headquote'><? echo $quote; ?></div></td>
</tr>

And here is the css that is used by that cell:
Code:

table#main {
height : 100%; 
background : #ffffff; 
width : 762px; 
border : 0 none inherit; 
border-left : 1px solid #000; 
border-right : 1px solid #000; 
border-top : 0 none inherit; 
border-bottom : 0 none inherit; 
margin : 0; 
padding : 0; 
} 
table#main td.head {
height : 0px; 
width : 762px; 
background : #006699; 
border : 0 none inherit; 
border-bottom : 2px solid #000; 
vertical-align : top; 
padding : 0; 
background-image: url(images/logo2.jpg);
} 
table#main td.head div.flash {
position: relative;
z-index:1;
}
table#main td.head div.headtitle {
z-index:2;
font-size : 24pt; 
color : #fff; 
position : relative; 
font-weight : bold; 
left : 5px; 
top : -45px; 
} 
table#main td.head div.headquote {
z-index:2;
font-size : 10pt; 
font-weight : bold; 
color : #fff; 
position : relative; 
text-align : right; 
right : 5px; 
top : -180px;
font-style: italic;
} 

Im sure its something Im looking over as I am a newb at css. Thanks for all help!

Hi,

I have 3 photos each with a credit (in text) beneath.

I want them positioned relative to each other but to stay centered with the rest of the page.

How do I wrap them? How do I position them?

Here's two pages of the same website that I'm working on. The problem appears in the menu when you hover over it to get to the submenu.

I've narrowed the problem down to the single line of code on line 232 'position: relative' which is for the content div beneath the div containing the navigation div. I have not used any css3 opacity properties yet I'm getting an unwanted opacity problem.

Working Site

Broken Site

Code:

#ticker {
	background: transparent url('../images/dark_gradient.png');
	overflow: hidden;
	display: table;
	margin-left: 20px;
	margin-top: 10px;
	width: 835px;
	height: 52px;
}

#ticker #items {
	position: relative;
	top: 0px;
	left: 829px;
}

the point is to use javascript to scroll the #items div along the container (#ticker). now, using this method, overflow: hidden does not seem to be working correctly. (i know display: table only works in FF, but this is an internal tool, so no need to make IE fixes yet) ... now, when i change display: table to display: block, the overflow works, but now the #items div is no longer relative to the container, but relative to the window.