• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 338
  • Last Modified:

How to display a FIXED DIV relative to the website CONTAINER - NOT relative to the BROWSER WINDOW

Thanks for reading.

I have a simple "picture gallery" website.

I want to position the div that contains the user's image in a FIXED div, so that they don't have to scroll around a whole bunch.

This image depicts what I need to do.

http://img21.imageshack.us/img21/1272/fixeddiv.jpg

As you know, FIXED divs are positioned relative to the user's browser window (which can be quite wide)

I need to position the DIV relative to the left edge of my website's container (as depicted in the pic)

What is the most elegant way to do this?

Do I have to resort to JavaScript?

Thanks!
0
bobbysdog
Asked:
bobbysdog
  • 3
  • 2
1 Solution
 
SSupremeCommented:
Try this example:
<html>
<head>
<style type="text/css">
html, body {height:100%; width:100%;}
h2 {float:left; background:red;}
#one {width:100%;position:fixed;left:0;top:150px; height:100px;background:blue;z-index:10;}
#two {margin: 0 auto; width:900px; background:green; height:100px;}
</style>
</head>
<body>
<div id="one"><div id="two"><h2>This is a heading with an absolute position</h2></div></div>
</body>
</html>

Open in new window

0
 
bobbysdogAuthor Commented:
Hi, thanks for taking the time to respond.

I'm not quite following your sample code though.

Like consider the below code...

Here, I want to make this pink box flush with the cyan box:

Are you able to do this?  Thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<style type="text/css">
        body { 
        height: 100%; 
        width: 700px;  
        margin: 0 auto;
        background-color: gray; 
        }
        
        #div_container { 
        height: 100%; 
        width: 700px;  
        margin: 0 auto;
        background-color: cyan; 
        }
        
        
        #div_my_fixed_picture { 
        position: fixed;
        top: 100px;
        left: 0px;
        width: 200px;
        height: 200px;
        background-color: pink;
        }
    </style>

</head>

<html>

    <body>
    
        <div id="div_my_fixed_picture">
            A picture goes here    
        </div>
        
        <div id="div_container">
            <h1>My Website</h1>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
        </div>
     
    </body>

</html>

Open in new window

0
 
SSupremeCommented:
Have a look:
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<style type="text/css">
        body { 
        height: 100%; 
        width: 700px;  
        margin: 0 auto;
        background-color: gray; 
        }
        
        #div_container { 
        height: 100%; 
        width: 700px;  
        margin: 0 auto;
        background-color: cyan; 
        }
        
        
        #div_my_fixed_picture { 
        
        width: 200px;
        height: 200px;
        background-color: pink;
        }
	#one {width:100%;position:fixed;left:0;top:150px; z-index:10;}
        #two {margin: 0 auto; width:700px; }
    </style>

</head>

<html>

    <body>
    
        <div id="one"><div id="two"><div id="div_my_fixed_picture">
            A picture goes here  (image instead of div)  
        </div></div></div>
        
        <div id="div_container">
            <h1>My Website</h1>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
            <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h3>
        </div>
     
    </body>

</html>

Open in new window

0
 
SSupremeCommented:
div #one makes fixed invisible box across browser area.
div #two makes area for content inside #one.
Image will be placed anywhere in #two area.
0
 
bobbysdogAuthor Commented:
Oh! You center a DIV in a fixed DIV

Yaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Pure genius thanks!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!



(\__/)
(='.'=)
(")_(")
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now