0
<div class="mainDiv">

    <span class="foregroundImage" id="foregroundImage1"></span>

    <!-- Layer Code -->

    <div class="layerDiv">

    </div>

    <!-- Layer Code -->

</div>

i need to position layerDiv such that

  1. its should be at center of mainDiv (not at center of screen)
  2. mainDiv height and width are auto , so even if i'm scrolling down it should be at visible part at center.
3
  • both horizontal and vertical ? Aug 8, 2012 at 9:50
  • yes center implies both horizontal and vertical
    – Maths Gal
    Aug 8, 2012 at 9:52
  • Are you trying to use layerdiv as a center column in maindiv?
    – WebChemist
    Aug 8, 2012 at 9:54

3 Answers 3

0

Give a width to the layer div and then margin : 10px auto. You can chose top/bottom margin to your comfort. It can be any fixed value. Cannot be auto. And layerDiv must have a width.

2
  • layerDiv have width but mainDiv width and height is auto and depends on resolution.
    – Maths Gal
    Aug 8, 2012 at 9:53
  • layerDiv will center itself in maindiv until the width of maindiv is greater than layerDiv width.
    – Ankur
    Aug 8, 2012 at 10:00
0

You need to create a method that finds the height and width of the main div and the height and width of the layerDiv.

  • The top position of the layerDiv = half of mainDiv height - half of layerDiv height
  • The left position of the layerDiv = half of mainDiv width - half of layerDiv width

Once you have this method ready, you could call this method on document load and on scroll events via JQuery.

0

For dead center box in box, try

$('.layerDiv')
    .css('position','relative')
    .width('90%')
    .height('90%')
    .css('left', 
        (
          0.5 * $('.mainDiv').width() 
        - 0.5 * $('.layerDiv').width()
        )
    )
    .css('top', 
        (
          0.5 * $('.mainDiv').height() 
        - 0.5 * $('.layerDiv').height()
        )
    );

adjust your width and height % accordingly or assign px value

for a centered box permanently in the center of the screen as scrolling, use:

$('.layerDiv')
    .css('position','fixed')
    .width(.9*$('.mainDiv').width())
    .height(.25*$(window).height())
    .css('left',
        (
            0.5 * $('.mainDiv').width()
            - (
                0.5 * $('.layerDiv').width()
                - $('.mainDiv').offset().left
            )
        )
    )
    .css('top',
        (
            0.5 * $(window).height()
            - (
                0.5 * $('.layerDiv').height()
                - $('.mainDiv').offset().top
            )
        )
    );

this would be an inner box 90% of the width of the maindiv, 25% the height of the screen, centered evenly within the div and always in the middle of the screen when scrolling

1
  • accidentally removed the innermost minus parenthesis when formatting the code, so I exaggerated the indentation to make that more clear when I put them back in. You should be able to copy/paste this in and see as described
    – WebChemist
    Aug 8, 2012 at 11:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.