Absolute Positioning CSS

MrLeN · #1 (**permalink**) 10-20-2005, 06:44 AM

I have a problem that I've been trying to sort out for 2 days, but it doesn't matter what I do, each thing I try almost works, but presents a new problem in at least one browser.

Ok, first, the scenario.

I have a website which is set at 770px wide. So of course in resolutions like 1024, there will be some white area on each side of the template, because the template is "centered"

Now, that's all baby coding. But here's my problem. I want to absolutely position some text into the template. The problem is, I have nowhere to justify the positioning from.

I thought I'd be tricky and make a div and absolutely position that div 50% from the left (that gives me a center), and then put another div inside that div and give in a minus left margin, which pulls the text over to the position I want.

The problem is that the first div causes the bottom scrollbar to show, because it's hanging off the page 50%. I made that div 1% wide, but then it either cuts the text of the div inside it, or just gets displayed as 100% anyway, depending on which browser.

Now I am sure that someone has a way to absolutely position a div on a centered template, but I certainly haven't been able to figure it out. Anyone?

MrLeN

MrLeN · #2 (**permalink**) 10-20-2005, 07:03 AM

Here's the best I have come up with so far.

It works in Firefox and Opera but not in IE:

CSS

Code:

.description1 {
position: absolute;
top: 190px;
left: 50%;
width: 1px;
}
.description2 {
margin-left: -190px;
width: 590px;
font-family: verdana;
font-size: 11px;
}

HTML

Code:

<DIV class="description2">
<SPAN class="description1">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</SPAN>
</DIV>

MrLeN

MrLeN · #3 (**permalink**) 10-20-2005, 07:08 AM

I can't believe the answer was so simple. Why on earh was I tying to use 2 layers? I don't know. Here's the answer:

CSS

Code:

.description {
	position: absolute;
	top: 200px;
	left: 50%;
	margin-left: -190px;
	width: 590px;
	font-family: verdana;
	font-size: 11px;
}

HTML

Code:

<div class="description">Text Here</div>

Thnaks for all your help. I donno what I would do without this place!

MrLeN