Home/ Questions/Q 8039511
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T03:35:39+00:00

As images say more than 1000 words, here’s my problem (note: I can’t post

  • 0

As images say more than 1000 words, here’s my problem (note: I can’t post images because I don’t have enough SO reputation, so I’ll post a link):

http://s7.directupload.net/images/120604/skhgwuqb.png

Here’s the use case:
The black, surrounding div is a page preview. The blue divs inside the black div are sections of this page. The blue divs outside are “edit” buttons. They should have the same vertical position as their correspondants.

because the black div and it’s contents are a page preview, I cannot move the edit buttons inside the div (without altering the page template to have “edit” buttons, which of course is bad by design).

How can I align them? If Javascript is necessary to achieve this, it will be okay, although I strongly favor a CSS solution.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I am not aware of a CSS-only way to achieve what you want if you can’t touch anything in the surrounding div. Here’s a jQuery solution:

    http://jsfiddle.net/BuS2p/

    <!doctype html><html><head>
<script src="/path/to/jquery.js"></script>
<style>
#surrounding_div {
 width: 400px;
 height: 400px;
 position: relative;
 background: blue;
}

#elm1 {
 width: 150px;
 height: 150px;
 background: red;
 position: absolute;
 left: 20px; top: 20px;
}

#elm2 {
 float: left;
 width: 350px;
 height: 100px;
 background: green;
 float: left;
 margin-top: 150px;    
}
</style>
</head><body>
<div id="surrounding_div">
  <div id="elm1">Testing</div>
  <div id="elm2">Testing</div>
</div>
<script>
jQuery(function() {
    $('#surrounding_div div').each(function() {
        theDiv = $(this);
        divOffset = theDiv.offset();
        $('<button>Edit</button>').appendTo('body').css({
          'left' : $('#surrounding_div').width() + 20,
          'top' : divOffset.top,
          'position' : 'absolute',
          'z-index' : 9000
        });
    });
});
</script></body></html>
    • 0