Position Absolute

HTML & CSS
1

Hello,

I know I believe I’ve done this before I’m using position: absolute for a div 1000px wide then giving it a margin of auto to center it but it doesnt center it.

Here is the URL

http://modocom.ca/amp

The div is the Steve div with the illustration in it, I’m trying to get it so the whole div is centered but doesnt seem to work, I’m sure I’m missing something minor, cant just think of it right now.

Thanks,

Mike

2

AP elements do not center with auto margins, they are removed from the normal page flow.

Have a look here to see how to center a fixed width AP element.

If your AP div is nested in a wrapping div then you will need to use position:relative; on the wrapping div to establish a containing block.

3

Perfect!!! Thanks!!!

4

One other question now, back to the same URL…

http://modocom.ca/amp/

If you roll over the Illustration Speech bubble pops up, is it possible to make the speech bubble visible first using the way I did it, maybe just for 5 seconds or something then go away then come up everytime you rollover the illustration. Also I have the triangle at the bottom of the speech bubble is it possible to position it on the side of the speech bubble instead of the bottom.

Thanks,

Mike

5

You really need JavaScript for that sort of thing.

I have the triangle at the bottom of the speech bubble is it possible to position it on the side of the speech bubble instead of the bottom.

Yes. Modify your code thus:

a.tip:hover span:after {
  position: absolute;
  display: block;
  content: ""; 
  border-color:  [COLOR="#FF0000"]transparent rgba(0,0,0,.6) transparent transparent;[/COLOR]
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  [COLOR="#FF0000"]top: 20px;
  left:-20px;[/COLOR]
}
6

I use below code to center align.
margin:0 auto;

7

Yup, that’s great … but, as pointed out above, that doesn’t work on elements that are positioned absolutely.

8

Maybe this one help you which i quoted from yahoo answers.

You really shouldn’t use inline styling like that. I suggest you give the div a class name like this -

<div class=“some”>SOME</div>

Then in your external css file, do this -

.some {
position: absolute;
top:20px;
text-align:center;
}

If you create a classname and assign it to any number of divs then need to change something, you can edit that style in your css file once.

9

Actually Ray auto margins will center absolute elements as long as they have a width defined and are also left:0 and right:0 and then auto margins will work.:slight_smile:

e.g.


#AP-centered {
	position: absolute;
	[B]width: 250px;[/B]
	height:200px;
	background:red;
	[B]left:0;
	right:0;[/B]
	[B]margin:auto;[/B]
}

People used to think that auto margins didn’t work on absolute elements because IE7 and under got it wrong but was fixed in IE8+. Other browsers have always centred using auto margins as long as width and left:0 and right:0 are also defined.

10
11

Hi Paul,
Thanks for pointing that out, I stand corrected. I always forget about that because I never use it. :slight_smile:

12

Yes most people don’t know about it because IE7 and under never supported it and therefore did not come into common use.:slight_smile: However these days it can be used now that ie7 support is low and avoids the element sliding off the page when the negative margin technique is used on a fluid page wrapper.