CSS Div positioning problem

@princessbubblesApr 14.2010

Hi there,

I am trying to position 3 divs on top of a Jquery slideshow – the only way that they sit(3 boxes of text) on top of the slideshow is by absolute positioning..but the position changes when I change screen sizes – is there a way to position a div on top of that Javascript that makes sure it stays the same across different screen sizes? Relative positioning won’t work.

Any help much appreicated!

to post a comment

CSS

@tirnaApr 14.2010 — #This is how I would do it without Jquery. Hopefully it can help you sort out how to do it Jquery.

I have 1 large black "slideshow" div with 3 smaller divs sitting on top of it.

The 4 divs stay in the same position regardless of how you change the browser window size.

[code=php] 
 <!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">
 <!--
 
 #div_ss {
 width: 300px;
 height: 300px;
 position: absolute;
 top: 50px;
 left: 250px;
 border: 2px solid black}
 
 #div1  {
 width: 70px;
 height: 70px;
 position: absolute;
 top: 50px;
 left: 70px;
 border: 2px solid red}
 
 #div2  {
 width: 70px;
 height: 70px;
 position: absolute;
 top: 80px;
 left: 190px;
 border: 2px solid green}
 
 #div3  {
 width: 70px;
 height: 70px;
 position: absolute;
 top: 200px;
 left: 130px;
 border: 2px solid blue}
 
 -->
 </style>
 </head>
 
 <body>
 
 <div id="div_ss">
 Slideshow div
 <div id="div1">Div 1</div>
 <div id="div2">Div 2</div>
 <div id="div3">Div 3</div>
 </div>
 
 </body>
 </html>
 
 [/code]

@mordaukApr 14.2010 — #Put a 4th div in that contains your other three divs and give it a position: relative;

@Eye_for_VideoApr 15.2010 — #As touched on by the other two posts, elements with a declared position (relative or absolute) will behave differently depending on whether or not their parent element also has a declared position.

From an old post:
The thing missing from your positioning is that unless the parent element also has a declared position, the child will do 1 of 2 things.

If position:relative, it will position as desired but space will be left as though that element was still in the natural flow. So you may move the 500 X 100 element down and over, but a 500 X 100 space will be left, as though it was still there.

If position:absolute, child is positioned relative to browser window and that position does not change even if window contracts or expands, (top 50, left 50 will always be top 50 left 50 regardless of screen size).[/QUOTE]
Best wishes,

Eye for Video

www.cidigitalmedia.com

CSS Div positioning problem

3 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS Div positioning problem

3 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #CSS _↴