Houston i have a problem

HTML & CSS
1

My problem is with dear explore 7

I have a div which contains to div´s

The parent div is set to position:relative so i can make use of absolute postion.

The left child div works fine - it is postioned left:0 according to its parent but the div which is set to right:0 also postions to the left in ie7

It works like a charm in firefox and ie8
I haven´t tested on safari yet

Have anybody experienced something simular and better yet does anybody have a solution to the problem?

Hoping for help

Kasper

2

Have you tried adding different values to the “right:0”?

Maybe make it something like, right:400 to push it 400px…they are both positioned the same, relative to the parent container. So the right one should either float:right or maybe use a margin to push it over.

3

This works for all major browsers and also for all IE including 5.5, 6, 7 and 8.
If you look at it closely you will probably find where you are having your problem.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>

<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Div positioning</title>
<style type=“text/css”>
<!–
body { margin-top:3px; margin-left:0px; text-align:center; }
#outer { position:relative; top:0px; left:0px; width:500px; height:500px; border:1px solid #666; margin-left:auto; margin-right:auto; }
#leftDiv { position:absolute; top:10px; left:10px; width:100px; height:100px; border:1px solid #F00; }
#rightDiv { position:absolute; top:10px; right:10px; width:100px; height:100px; border:1px solid #F00; }
–>
</style>
</head>

<body>

<div id=“outer”>
<div id=“leftDiv”>
</div>
<!-- end leftDiv –>
<div id=“rightDiv”>
</div>
<!-- end rightDiv –>
</div>
<!-- end outer –>

</body>

</html>

4

No im afraid ie7 seems to ignore absolute right so it dosnt help me to say 400px instead of 0px.

Besides i wanna make sure that the content is set exactly to the absolute right of it´s parent.

5

thx allan i will take a further look at it and let you know if i have seen the light :slight_smile:

6

nope the light didn´t shine back on me.
My css looks like this

#nav-below {float:left; width:660px; padding:0 0 30px; position:relative;}
#nav-below .nav-previous {position:absolute; left:0;}
#nav-below .nav-next {position:absolute; right:0;}

7

Can you send us a link to the actual page?

8

You can also do it using float instead of position

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            #container {
                width: 600px;
                border: 1px solid black;
                overflow: hidden
            }
            #leftChild {
                width: 30%;
                background-color: green;
                height: 200px;
                float: left
            }
            #rightChild {
                width: 30%;
                background-color: blue;
                height: 200px;
                float: right
            }

        </style>
    </head>
    <body>

        <div id="container">

            <div id="leftChild"></div>
            <div id="rightChild"></div>

        </div>

    </body>
</html>

or if you must use position


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
            #container {
                width: 600px;
                position: relative;
                border: 1px solid black;
                height: 200px
            }
            #leftChild {
                width: 30%;
                background-color: green;
                height: 200px;
                position: absolute;
                top: 0px;
                left: 0px
            }
            #rightChild {
                width: 30%;
                background-color: blue;
                height: 200px;
                position: absolute;
                top: 0px;
                right: 0px
            }

        </style>
    </head>
    <body>

        <div id="container">

            <div id="leftChild"></div>
            <div id="rightChild"></div>

        </div>

    </body>
</html>
9

Your CSS applied as follows renders in IE7 with the content positioned to the left and right of #nav-below. To pin down your problem we’ll need to see your full code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>abo2512</title>
<style type="text/css" media="screen">
#nav-below {float:left; width:660px; padding:0 0 30px; position:relative;}
#nav-below .nav-previous {position:absolute; left:0;}
#nav-below .nav-next {position:absolute; right:0;}
</style>	
</head>

<body>
<div id="nav-below">
<div class="nav-previous">left</div>  
<div class="nav-next">right</div>
</div>

</body>
</html>
10

The issue was a span inside the child div
I had set it to float:rigtht; and display:block

 
				<div id="nav-below" class="navigation">
					<div class="nav-previous"><a href="http://localhost/wordpress/97" rel="prev"><span class="meta-nav"></span> Older</a></div>
					<div class="nav-next"><a href="http://localhost/wordpress/nyhed-nr-1" rel="next">Newer <span class="meta-nav"></span></a></div>
				</div><!-- #nav-below -->

I removed float:right and display:block and it now works also in ie7

Thx for all the responses
Hope to help you some day

Cheers