CSS - Relative Positiong To An Image

I'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work.
I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing.
I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach.

Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image.

Essentially, my code is something like this:

CSS:
Code:

td#CONTENTDISPLAY
{
  width: 100%;
  height: 100%;
  text-align: left;
  vertical-align: top;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

div#CONTENTBANNER
{
  position: relative;
  height: 100%;
  padding: 0 0 0 0;
}

img.CONTENTIMG
{
  position: absolute;
  height: 100%;
}

HTML:
Code:

...
  <td id="CONTENTDISPLAY">
    <div id="CONTENTBANNER">
      <img class="CONTENTIMG" />
    </div>
  </td>
...

Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning.

Can anyone help point me in the right direction?

Thanks!

- skubik

I am trying to create an image that stays in one place no matter how large the window is. This seems to work great in FF but when i open it in IE the image is not where i positioned it! Has anyone ever seen this? Thanks.
Code:

#apDiv4 {
    position:relative;
    left:370px;
    top:328px;
    width:154px;
    height:130px;
    z-index:1;
    clip: rect(auto,auto,auto,0px);
    margin-left: auto;
    margin-right: auto;
}

Hi! I can not solve one problem. As You can see here
bezlica.ru/joomla/ , I need to have image "contacts" at
the bottom of the grave. Currently, it is relative to top and
works fine on different resolutions. But, if content needs to be
expanded like this bezlica.ru/joomla/index.php?option=com_content&task=view&id=12&Itemid=9,
images drops down from the grave to bottom. Maybe there is a way to
make it relative to the bottom of the screen, or some other
solution? It needs to stay fixed where it is on different
resolutions, that is why it is so hard for me! Any help will be
appreciated. Regards, Konstantin.

Hi,


Code can be found below and output as it is currently @ http://www.generating-sets.com/index.new.php

Anyway, I have the box with the id of 'newsbar'. My problem is i want this box in the following posistion:

It should sit on the bottom footer bar and be in between the two sidebars. The code below makes it overlap the two sidebars.

So how could i make the posistion relative to the two side bars so it nests in the middle? All this CSS is doing my head in, but for glory without tables! lol

Charlie



PHP Code:
 h1 {font-size: 1.4em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h2 {font-size: 1.3em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h3 {font-size: 1.2em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h4 {font-size: 1.1em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

h5 {font-size: 1em;
font-family: Times, "Times New Roman", serif;
font-weight: bold;
text-align: left;}

a:link {color: #ffffff;
text-decoration: none;}

a:hover {color: #dedbcb;
text-decoration: underline;}

a:visited {
    color: #ffffff;
text-decoration: none;}    

body {margin: 0;
padding: 0;
font-family: sans-serif;
font-size: .7em;
line-height: 1.4em}

div#header {padding: 2%;
text-align: center;
background-color: #0e2e3b;
color: #ffffff;
margin-bottom: 2px;
border-bottom: solid #ffffff 1px}

div#navbar {padding: 0%;
text-align: center;
background-color: #0e2e3b;
color: #ffffff;
margin-bottom: 0px;
border-bottom: solid #ffffff 1px}

div#newsbar {padding: 1%;
text-align: center;
background-color: #0e2e3b;
color: #ffffff;
margin-bottom: 0px;
border: 2px #ffffff solid;
position: relative;}

div#footer {padding: 0%;
text-align: center;
color: #ffffff;
clear: both;
background-color: #0e2e3b;
border-top: solid #ffffff 1px}

div#maincontent {padding: 2%;
text-align: justify;
margin-left:  150px;
background-color: #0e2e3b;
color: #ffffff;
margin-bottom: 2px;
border-right: solid #ffffff 1px;
border-left: solid #ffffff 1px}

div#leftcolumn {padding: 2%;
float: left;
text-align: right;
background-color: #0e2e3b;
color: #ffffff;
width: 150px;}

div#rightcolumn {padding: 2%;
float: right;
text-align: right;
background-color: #0e2e3b;
color: #ffffff;
width: 10px;} 

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?

I'm trying to create these two elements that are 100% of their parent element minus the height of anything above or below them.

For example:

Code:

<html>
	<head>
		<style type = "text/css">
		body
		{
		 	margin: 0px;
		 	padding: 0px;
			height: 100%;
		 	
		 	color: #FFFFFF;
			background-color: #636E90;
		}
		
		div.everything
		{
		 	padding: 0px;
		 	margin: 0px;
			margin-left: auto;
			margin-right: auto;
			
			width: 750px;
			height: 100%;
			
			background-color: #4A61A8;
		}
		
		.top
		{
			background-color: red;
			height: 120px;
		}
		
		.left
		{
		 	float: left;
		 	margin-left: 0px;
			width: 125px;
			height: 100%;
			background-color: #000000;
			color: #FFFFFF;
		}
		
		.right
		{
		 	float: right;
			width: 125;
			height: 100%;
			margin-right: 0px;
			color: #000000;
		 	background-color: #FFFFFF;
		}
		</style>
	</head>
	
	<body>
		<div class = "everything">
			<div class = "top">Top</div>
			<div class = "left">Left</div>
			<div class = "right">Right</div>
		</div>
	</body>
</html>

The problem is that the "left" and "right" elements extend beyond the bottom of "everything," and more precisely they're extending the height of "top" off the bottom of "everything."

That probably read poorly.

The "left" and "right" elements are doing what they're supposed to do in that they are 100% of the parent element "everything." The problem is that this height isn't derived as being height of "everything" - height of "top", but instead it's just the absolute height of "everything."

I've been trying to figure out how to make their height 100% of their parent element after other elements, such as "top", are placed inside the same parent element.

i want to place an image relative to the top left of an element. is that possible in css? i've been looking everywhere, but i can't find anything about having two properties in one element.

In the following code i need *Signup* to align just to the right of *Login*. Due to *SearchContainer* location, it must be absolute positioned. Thanks for the help.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<style type="text/css" title="">
#SearchContainer	{ position:absolute; z-index:1; width:210px; height:125px; border:1px solid red; }
	#SearchField	{ position:relative; z-index:3; width:200px; top: 5px; border:1px solid orange; }
	#LoginMessage	{ position:relative; z-index:3; width:200px; top: 10px; border:1px solid yellow; }
	#Login			{ position:relative; z-index:3; width:150px; top: 20px; border:1px solid green; }
	#Signup			{ position:relative; z-index:4; width: 25px; top: 20px; left: 10px; border:1px solid blue; }

</style>

</head>
<body>

	<div id="SearchContainer">
		<div id="SearchField">Epsum factorial non</div>
		<div id="LoginMessage">Lorem ipsum dolor</div>
		<div id="Login">Li Europan lingues<br>Li Europan lingues</div>
		<div id="Signup">xxx</div>
	</div>

</body>
</html>

Okay I have a big problem and I don't know what is happening and it's really really bugging me.

I have some extra space at the top of my page, it's about 10 lines in height. the items below the space are made up of two classes. They are .source and .quote.

I tried using position:relative so that they move up but I have a problem.

I tried
Code:

  position:relative;bottom:7em; 
  

but that just amde them disapear leaving just their space.

Also the .source iems are missing already and I don't know how to make them apear. I'm not hiding them at all at any point.

http://142.177.157.241:8080/bikers/

the automatic parse URLs options doens't work even when it's used.

I am trying to learn CSS Positioning in an effort to move away from table-based layout. I use some pretty complicated layouts and I am a big fan of the "stretch" effect for my site headers.

As my first project, I am converting a site that uses a stretch header, and in table layout, used to be divided into 5 columns. I have managed to re-create the header almost as good as the original with just 3 divs, using absolute positioning, z-index, and a background image. Then I used relative positioning to create the div for the main content, and I was planning to do another relative-positioned div for the footer. I feel that I'm very close but could use a little help to get over the hump. I have two main problems:

1. When you resize the window horizontally below about 850px, the images in the header start to overlap. I would like them to "bump" each other and have a scrollbar appear. I've tried to fix this using the min-width property in various divs, and I tried to use a wrapper div, but nothing seemed to work very well. This is something I can live with, but any tips would be appreciated.

2. Relative positioning seems to work fine for the main content div (#middlebox in my .css). However, I did the footer div in the same manner, and it only works in Firefox, not IE. If I could get it to work in both Fx and IE I'd be happy - I don't care about any other browsers.

3. Any other tips and tricks that would make it cleaner or better, etc. would be appreciated. Remember I am a n00b so go slow.

Original site (tables): http://www.gpleague.com
New test site (css): http://www.gpleague.com/cssp.htm
Css file: http://www.gpleague.com/csstest.css

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.

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 am trying to have div mian, lightback, and darkback extend vertically to accommodate all cnav and content items. Obviously it is not working, but I cannot seem to spot my mistake. I would be very grateful if someone would be able to help me find where I am going wrong.

HTML.
Code:

<div id="main">
        <div id="lightback">
            <div id="darkback">
                <div id="contentnav">
                    <div class="cnavlink"></div>
                    <div class="cnavspacer"></div>
                    <div class="cnavitem"></div>
                    <div class="cnavitem"></div>
                    <div class="cnavspacer"></div>
                    <div id="cnavbox"></div>
                </div>
            <div id="contentbox">
            THIS IS CONTENT
            </div>
        </div>
     </div>
</div>

CSS:
Code:

#main {
	width: 761px;
	position: absolute;
	left: 100px;
	top: 328px;
	height: auto;
}
#lightback {
	background-color: #222322;
	border-top-width: 0px;
	border-right-width: 3px;
	border-bottom-width: 0px;
	border-left-width: 3px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: none;
	border-left-style: solid;
	border-top-color: #C6A084;
	border-right-color: #C6A084;
	border-bottom-color: #C6A084;
	border-left-color: #C6A084;
	position: relative;
	height: auto;
	width: 755px;
}
#darkback {
	background-color: #131313;
	height: auto;
	width: 745px;
	margin-right: 7px;
	margin-left: 4px;
	position: relative;
}
#contentnav {
	position: relative;
	width: 150px;
	margin: 4px;
	float: right;
	background-color: #131313;
	border-top-width: 10px;
	border-bottom-width: 10px;
	border-top-style: solid;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: none;
	border-top-color: #424242;
	border-bottom-color: #424242;
}
.cnavspacer {
	background-color: #424242;
	height: 10px;
	width: 100%;
	position: relative;
}
.cnavlink {
	background-color: #282828;
	background-repeat: repeat;
	height: 21.5px;
	width: 100%;
	position: relative;
	margin-top: 2px;
	margin-bottom: 2px;
}
.cnavitem {
	width: 100%;
	height: 150px;
	margin-bottom: 4px;
	position: relative;
	background-color: #424242;
	margin-top: 4px;
}
#cnavbox {
	width: 100%;
	height: 50px;
	margin-bottom: 4px;
	position: relative;
	background-color: #424242;
	margin-top: 4px;
}
#contentbox {
	background-color: #222322;
	width: 577px;
	position: relative;
	float:left;
	border-top-width: 10px;
	border-right-width: 1px;
	border-bottom-width: 10px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #424242;
	border-right-color: #424242;
	border-bottom-color: #424242;
	border-left-color: #424242;
	margin-top: 4px;
	margin-right: 4px;
	margin-bottom: 4px;
	margin-left: 3px;
}

found what I was looking for.