Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2011-02-25
5
Medium Priority
?
335 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 34985173
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
ID: 34985291
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 2000 total points
ID: 34985380
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
ID: 34985394
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
ID: 34985447
Oh! You center a DIV in a fixed DIV

Yaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

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



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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

604 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