Solved

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

Posted on 2011-02-25
5
318 Views
Last Modified: 2012-05-11
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
Comment
Question by:bobbysdog
  • 3
  • 2
5 Comments
 
LVL 16

Expert Comment

by:SSupreme
Comment Utility
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
 

Author Comment

by:bobbysdog
Comment Utility
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
 
LVL 16

Accepted Solution

by:
SSupreme earned 500 total points
Comment Utility
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
 
LVL 16

Expert Comment

by:SSupreme
Comment Utility
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
 

Author Comment

by:bobbysdog
Comment Utility
Oh! You center a DIV in a fixed DIV

Yaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

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



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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now