How to auto align two divs which are present in a parent div

Question

I have two divs inside a parent div. The div 1 is set to 75% width and the second div is set to 25%. User have the option of switching the position of div 1 and div 2 by using themes in our application.

.docTOCDiv li.iconPage:hover {
    text-decoration: none;
}
div.docPage {
    background-color: #ffffff;
    background-image: none;
    border-color: #ffffff;
    border-style: solid;
    border-width: 0;
}
.docToggleFull {
    background-color: #002a5c;
    background-image: url("/site_assets/images/doc_style/murraystate/murraystate_banner.png");
    background-position: right top;
    background-repeat: no-repeat;
    padding-left: 0.5em;
}
div.hideTOC {
    margin-top: 1em;
}
.docTOCDiv {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    left: 0.2em;
    margin: 8em 0 0 0.2em;
    padding: 0.5em;
    position: absolute;
    top: 0;
}
h3.docPageH3 {
    border-bottom: medium none;
    color: #002a5c;
    font-size: 18px;
    font-weight: normal;
    line-height: 2em;
    margin: 0;
    padding-left: 0.5em;
}
div.docPageCorner {
    line-height: 0;
}
.docTOCDiv li.iconPage a:link, .docTOCDiv li.iconPage a:active, .docTOCDiv li.iconPage a:visited {
    color: #ffffff;
}
.docToggle {
    background-color: #002a5c;
    background-image: url("/site_assets/images/doc_style/murraystate/murraystate_banner.png");
    background-position: right top;
    background-repeat: no-repeat;
    padding-left: 18em;
}
div.docSection {
    background-color: #ffffff;
    border-color: #1e5127;
    border-style: solid;
    border-width: 0;
    margin-bottom: 1.2em;
    margin-top: 0.2em;
    padding: 0.5em;
}
.docTOCDiv li.iconSection a:link, .docTOCDiv li.iconSection a:active, .docTOCDiv li.iconSection a:visited {
    color: #ffffff;
}
div.docPageBottom {
    background-image: none;
}
.docTOCDiv ul, .docTOCDiv ul:hover {
    background: #6699cc none repeat scroll 0 0;
}
.docTOCDiv li.iconSection:hover, .docTOCDiv li.iconSection a:hover {
    color: #93b1d5;
    text-decoration: none;
}
div.docDiv {
    background-color: #002a5c;
    background-image: none;
}
div.docPageBottomCorner {
    background-image: none;
}
.docTOCDiv ul:hover {
    background-image: none;
}
div.editPage {
    margin: 1em;
}
.docTOCDiv ul.sectionLevel, .docTOCDiv ul.sectionLevel:hover {
    background: #6699cc none repeat scroll 0 0;
    color: #93b1d5;
}
div.docSection p {
    color: #000000;
    font-size: 11px;
}
div.pagination {
    padding: 1em;
}
h2.docDivH2 {
    background-color: #ffcc00;
    border: 3px solid #fff;
    color: #000033;
    font-size: 21px;
    font-weight: bold;
    line-height: 120%;
    margin: 0;
    padding: 0.5em;
}
.docTOCDiv div.pageTOCBottom {
    border-color: #3b6289;
    line-height: 0;
}
div.submitDivLeft {
    border: medium none;
    margin-top: 6em;
}
div.ifLeftTOC {
    float: left;
    margin-top: -0.4em;
}
.docTOCDiv h5 {
    background-color: #6699cc;
    border: medium none;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    margin: 1.1em 0 0;
    padding: 0.5em;
}

<div id="doc" class="contentDiv" style="width: 105.4%;">
    <!-- Document Section starts here -->

    <div class="sectionDiv docToggle" id="docToggleDiv">
        <!-- Doc Table of Content starts -->

        <div id="docTOC" class="docTOCDiv" style="height: 440px;">
            <div class="submitDivLeftFloat clearfix">
                <div id="toggle-toc" style="margin-top: 0px;">
                    <a title="Hide Page List" class="iconButton hide">Hide</a>
                </div>
            </div>

            <h5>Page List</h5>
            <div id="allPages" class="allPages" style="height: 315px; overflow-y: auto; overflow-x: hidden;">
            
            <div class="">
            <ul id="sections-toc-ul-47631849">
              <li class="iconPage">
                <a href="/doc/10672558/47631849" class="pageTitle_47631849">DYO Page</a></li>
              
            </ul>
            </div>
            
        </div>
         
        <table><tbody><tr>
        <td><div class="button" id="add_page" style="margin-top: 10px;"><a tabindex="0" title="Add new page" class="iconOnlyButton add">&nbsp;</a></div></td>
        <td><div class="button" id="manage_pages" style="margin-left: 5px; margin-top: 10px;"><a tabindex="0" class="iconButton edit">Manage Pages</a></div></td>
        </tr></tbody></table>
          
        </div>
        <!-- Doc Table of Content ends -->

        <div id="pagesArea">

            <div class="button pull-right" id="manage_content_button_47631849">
                <a tabindex="0" class="iconButton edit">Manage Content</a>
            </div>
            <div class="floatLeft">
            <h2 class="docDivH2 pageTitle_47631849">DYO Page</h2>
            </div>

            <a tabindex="0" id="pageTitleEdit_47631849">edit title</a>
            <div id="page_body_47631849" class="docPage clear">
                <div class="docPageSider">
                    <div class="grayMessageDiv">
                        <div class="noSectionsMessage">
                        Currently, there is no content on this page.To add content to this page, select a content type:<div class="newSectionDropdown_47631849 button dropdown" id=""></div>							<a class="iconOnlyButton add" title="Add new content">&nbsp;</a>
                    </div>
                    </div>
                </div>
            </div>
    </div>
    <!-- Document Section ends here -->
    </div>

Since there are lot of css files associated with each theme, we can't change or update every css property. we are not able to vertically align the divs exactly. so thought of using Jquery and set the height of divs. #docToggleDiv is the master div. The #docTOC should always be the height of #docToggleDiv.

Here is what I have tried until now using Jquery:

<script>
jQuery.noConflict();
jQuery(document).ready(function() {

    var sectionDivHeight = jQuery('#docToggleDiv').height() ;
    var docTOCDivHeight = jQuery('#docTOC').height() ;

    // since doc view page doesn't has the right side quick links, we can increase the size of the container a little more.
    // The right side edge of the container is inline with the author or creator name displayed on the right top corner
    jQuery('.contentDiv').css("width", "105.4%");

    if ( sectionDivHeight < docTOCDivHeight ) {

        // in rest all test cases, the table of contents list height should adhere to the height of the section div
        // This is required when the TOC is on the left side and the hide button is way off the top border
        jQuery('#docTOC').css("height", sectionDivHeight );
        jQuery('#toggle-toc').css("margin-top", "0px");

        // this is to make the TOC plus signs appear within the viewable area in the TOC
        //jQuery('#docTOC').find('li.iconPage').css("margin", "0 0.7em 0 0");

        // The 125 which I have set is an average value after checking all the docs in the ticket RT119492
        jQuery('#allPages').css("height", sectionDivHeight - 125 );
        jQuery('#allPages').css("overflow-y", "auto");
        jQuery('#allPages').css("overflow-x", "hidden");

        // The add page and Manage Pages button are touching the Scrollbar
        jQuery('#add_page').css("margin-top", "10px");
        jQuery('#manage_pages').css("margin-left", "5px");
        jQuery('#manage_pages').css("margin-top", "10px");

        // this is to make the TOC plus signs appear within the viewable area in the TOC
        jQuery('#allPages').find('div.TOCcollapsed').css("width", "14em");

    }
    }); // END of Jquery Ready Block

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Adding some of the pictures here.

Answer 1

You just need to obtain the top position of the element at the left, and then apply it as the top value on the element at the right:

jQuery(document).ready(function() {

  var docTOCtop = $('#docTOC').position().top;
  
  $('#docToggleDiv').css({"top": docTOCtop});

 });

.container {
  height: 600px;
  background-color: Tomato;
  position: relative;
  
}

#docTOC {
  position: absolute;
  top: 100px;
  left: 0;
  width: 25%;
  height: 500px;
  background-color: wheat;
}

#docToggleDiv {
  position: absolute;
  right: 0;
  width: 75%;
  height: 500px;
  background-color: aquamarine;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="docTOC"></div>
  <div id="docToggleDiv"></div>
</div>