By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
425,811 Members | 785 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 425,811 IT Pros & Developers. It's quick & easy.

Position centered div on bottom of another div in IE

P: n/a
Hi,

I want to place a div centered of another div in IE. I get this to work
in Mozilla, but not in IE.

The code i use for mozilla is the following :

<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
}
#banner {
position : absolute;
margin-left:auto;
margin-right:auto;
left: 0px;
right: 0px;
width : 150px;
height:60px;
bottom : 0px;
}
</style>
</head>

<body>
<div id="content">
<div id="banner">Content</div>
</div>
</body>
</html>
The code i use for IE is this :
<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
text-align:center;
}
#banner {
text-align:left;
position:absolute;
width : 150px;
height:60px;
}
</style>
</head>

<body>
<div id="content">
<div id="banner">Content</div>
</div>
</body>
</html>

The problem is that banner div starts in the middle of the page. The
most left position is the center of the page. But i want it to be
centered in the div. If I leave out position:absolute it gets centered
but it's placed on top of the content div

Anyone got an idea how to solve this ?

--
DaWoE
Jul 20 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Els
DaWoE wrote:
Hi,

I want to place a div centered of another div in IE. I get
this to work in Mozilla, but not in IE.

The code i use for mozilla is the following :

<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
}
#banner {
position : absolute;
margin-left:auto;
margin-right:auto;
left: 0px;
right: 0px;
width : 150px;
height:60px;
bottom : 0px;
}
</style>
</head>

<body>
<div id="content">
<div id="banner">Content</div>
</div>
</body>
</html>
The code i use for IE is this :
<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
text-align:center;
}
#banner {
text-align:left;
position:absolute;
width : 150px;
height:60px;
}
</style>
</head>

<body>
<div id="content">
<div id="banner">Content</div>
</div>
</body>
</html>

The problem is that banner div starts in the middle of the
page. The most left position is the center of the page. But
i want it to be centered in the div. If I leave out
position:absolute it gets centered but it's placed on top
of the content div

Anyone got an idea how to solve this ?


Get rid of the position:absolute on the #content too. It puts
elements out of their normal order in the document.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 20 '05 #2

P: n/a
Els wrote:
DaWoE wrote:

Hi,

I want to place a div centered of another div in IE. I get
this to work in Mozilla, but not in IE.

The code i use for mozilla is the following :

<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
}
#banner {
position : absolute;
margin-left:auto;
margin-right:auto;
left: 0px;
right: 0px;
width : 150px;
height:60px;
bottom : 0px;
}
</style>
</head>

<body>
<div id="content">
<div id="banner">Content</div>
</div>
</body>
</html>
The code i use for IE is this :
<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
text-align:center;
}
#banner {
text-align:left;
position:absolute;
width : 150px;
height:60px;
}
</style>
</head>

<body>
<div id="content">
<div id="banner">Content</div>
</div>
</body>
</html>

The problem is that banner div starts in the middle of the
page. The most left position is the center of the page. But
i want it to be centered in the div. If I leave out
position:absolute it gets centered but it's placed on top
of the content div

Anyone got an idea how to solve this ?

Get rid of the position:absolute on the #content too. It puts
elements out of their normal order in the document.

It messes up my layout if I leave it out.

--
DaWoE
Jul 20 '05 #3

P: n/a
Els
DaWoE wrote:
Els wrote:
DaWoE wrote:

Hi,

I want to place a div centered of another div in IE. I get
this to work in Mozilla, but not in IE.

The code i use for mozilla is the following :

<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
}
#banner {
position : absolute;
margin-left:auto;
margin-right:auto;
left: 0px;
right: 0px;
width : 150px;
height:60px;
bottom : 0px;
}
</style>
</head>

<body>
<div id="content">
<div id="banner">Content</div>
</div>
</body>
</html>
The code i use for IE is this :
<html>
<head>
<style type="text/css">
#content {
position : absolute;
top : 100px;
bottom : 100px;
left:0px;
right:0px;
width:100%;
height:400px;
text-align:center;
}
#banner {
text-align:left;
position:absolute;
width : 150px;
height:60px;
}
</style>
</head>

<body>
<div id="content">
<div id="banner">Content</div>
</div>
</body>
</html>

The problem is that banner div starts in the middle of the
page. The most left position is the center of the page.
But i want it to be centered in the div. If I leave out
position:absolute it gets centered but it's placed on top
of the content div

Anyone got an idea how to solve this ?

Get rid of the position:absolute on the #content too. It
puts elements out of their normal order in the document.


It messes up my layout if I leave it out.


What layout?
I can only see

<body>
<div id="content">
<div id="banner">Content</div>
</div>
</body>

I am quite sure that in the end, it's really the
position:absolute of your content that messes up the layout
the most.
Besides, it doesn't work in all browsers to use a
position:absolute with both top, left, bottom and right
values.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Jul 20 '05 #4

P: n/a
On 15 Jul 2004 10:12:46 GMT Els <el*********@tiscali.nl> broke off
from drinking a cup of tea at LocusMeus.com to write:
I am quite sure that in the end, it's really the
position:absolute of your content that messes up the layout
the most.


Ar ha! Found you! hiding in one of these two groups. You really don't
like absolute positioning do you, Els?

I cant say I'm a great fan, it does seem to go wrong a lot!

Which leads me to the question, can complex layouts be achieved
without tables (spit) but just with relative CSS elements?

Matt

--
If your encyclopaedia doesn't list "widget glass", you're reading the wrong encyclopaedia.
The Probert Encyclopaedia. Its not the same.
http://www.probertencyclopaedia.com
Jul 20 '05 #5

P: n/a
Els
Matt Probert wrote:
On 15 Jul 2004 10:12:46 GMT Els <el*********@tiscali.nl>
broke off
from drinking a cup of tea at LocusMeus.com to write:
I am quite sure that in the end, it's really the
position:absolute of your content that messes up the layout
the most.
Ar ha! Found you! hiding in one of these two groups.


Which two groups? I read eh.. let's see...11 groups about
webdesign and html and stuff.
You
really don't like absolute positioning do you, Els?
I have no problem with it. My menu uses it too. It's just a
bit difficult to use the right way if you're just beginning
;-)

And in the case of the OP, setting position:absolute to the
container of the content, is not a good idea. The box won't
respond to its contents. Easy to see how that would be a
problem if one would get more contents or a larger font-size
or something.
I cant say I'm a great fan, it does seem to go wrong a lot!
Only if you use it for the wrong purpose.
Which leads me to the question, can complex layouts be
achieved without tables (spit) but just with relative CSS
elements?


Yes. And most of the time you don't even need
position:relative either. Just floats, but not too many. You
don't want to make IE hide your stuff when you're not looking
;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: Chumbawamba - Homophobia
Jul 20 '05 #6

P: n/a
On 15 Jul 2004 13:07:11 GMT Els <el*********@tiscali.nl> broke off
from drinking a cup of tea at LocusMeus.com to write:
I have no problem with it. My menu uses it too. It's just a
bit difficult to use the right way if you're just beginning
;-)


Oh miaooow!

That was uncalled for, Els!

I think you're mistaking me for some one else.

Matt

--
If your encyclopaedia doesn't list "widget glass", you're reading the wrong encyclopaedia.
The Probert Encyclopaedia. Its not the same.
http://www.probertencyclopaedia.com
Jul 20 '05 #7

P: n/a
Els
Matt Probert wrote:
On 15 Jul 2004 13:07:11 GMT Els <el*********@tiscali.nl>
broke off from drinking a cup of tea at LocusMeus.com to
write:
I have no problem with it. My menu uses it too. It's just a
bit difficult to use the right way if you're just beginning
;-)


Oh miaooow!

That was uncalled for, Els!

I think you're mistaking me for some one else.


Not at all Matt, I wasn't referring to you, I just explained why
I advised the OP not to use it :-)
Somehow you must have applied an old saying about a fitting shoe
or something ;-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vo. O resto imperfeito.
- Renato Russo -
Now playing: System of a Down - Aerials
Jul 20 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.