Html 试图将一个div移动到另一个div下面，但对齐方式完全不正确

您好，我正在尝试编辑我的代码，以便我的工具如下所示：

然而，我有困难与我的代码，我不能得到正确的对齐的时刻。我使用一个iframe部署HTML，我在HTML和CSS下面的底部包含了这个iframe

这是我的HTML

这是我的CSS

<style type="text/css">

a.sfLink {font-family: Segoe Print; size; 10}
a {text-decoration:none;}
a:hover {text-decoration: underline;}
a.qLink:hover {text-decoration:none;}
a.whtNavLinks {color:#FFFFFF; font-family: Corbel; font-size: 14px; text-decoration: none; font-weight: bold;}
div {box-sizing: border-box;}
div.actnHeader {position: absolute; top: 12px; right: 285px;}
div.contactsScreen {display: none; z-index:-4; position: absolute; top: 0px; right: 0px; width:582px; height:100%; background-color :#ffffff; opacity: 0.70; filter: alpha(opacity=70);}
div.contactsTbl {display: none; z-index:-5; position: absolute; top: 15px; width: 540px; background-color :#cfcfcf; padding: 1px; border-style: solid; border-radius: 10px; border-width: 1px 2px 3px 1px; border-color: #aeaeae #aeaeae #989898 #aeaeae; font-family: Corbel;}
div.emplHeader {position: absolute; top: 15px; right: 70px;}
div.hlpCtgDiv {border-radius: 10px; border-width: 1px; border-style:dotted; border-color: #ffffff; display: none; width:494px;}
div.loading {z-index: 100; position: absolute; top: 5px; right: 0px; width: 100%; height: 390px; background-color: 2195DF; text-align: center; vertical-align: middle;}
div.mgrHeader {position: absolute; top: 15px; right: 0px; width: 60px; text-align:center;}
div.processBlurb {font-family: Segoe Print; font-size: 16px; text-align: center; width:430px; margin-bottom:10px;}
div.subHeader {height: 26px; width: 440px; font-family: Calibri, Arial; font-style: italic; font-size:12px; font-weight:bold; text-align: center; vertical-align:bottom;}
div.mainHeader {float: left; height: 30px; width: 440px; font-family: Calibri, Arial; font-size: 14pt; font-weight:bold; color:#ffffff; text-align: center; vertical-align: middle; border-style: solid; border-bottom-left-radius: 7px; border-bottom-right-radius:7px; border-width: 0px 2px 3px 1px; border-color: #c6c6c6 #c6c6c6 #888888 #c6c6c6;}
div.q {float: left; vertical-align:top; background-color: #fffce7; border-style: solid; border-top-left-radius: 10px; border-top-right-radius:10px; border-width: 1px 2px 0px 1px; border-color: #fff8c4 #fff8c4 #ece39c #fff8c4; width: 60px; height: 60px; color:#c6c6c6;}
div.qCurrent {float: left; vertical-align:top; border-style: solid; border-top-left-radius: 10px; border-top-right-radius:10px; border-width: 1px 2px 0px 1px; border-color: #c6c6c6 #c6c6c6 #666666 #c6c6c6; width: 248px;  height: 60px; color:#3f3f3f;}
div.qcontentTbl {float: left; align: center; width: 440px;}
div.qspacerRow {float: left; width: 4px; height: 60px; padding:0px}
div.quarterTitle {position: relative; top: 10px; text-align:center; font-family: Corbel; font-size: 14px;}
div.quarterTitle:hover {position: relative; top: 10px; text-align:center; font-family: Corbel; font-size: 14px; border-radius: 5px; border: solid; border-width: 1px 2px 2px 1px; background-color :#fff; border-color: #fff8c4 #fff8c4 #ece39c #fff8c4;}
div.quarterText {position: relative; top: 10px; text-align:center;  font-family: Corbel; font-size: 14px;}
div.quarterTitleCurrent {position: relative; top: -1px; text-align: center; font-family: Corbel; font-size: 32px; color:#ffffff;}
div.quarterTextCurrent {position: relative; top: -1px;  text-align:center; vertical-align:top; font-family: Corbel; font-size: 14px; color:#ffffff; line-height: 110%;}
div.resource {top:30px; float: left; right: 0px; width: 530px; height: 60px; background-color: #fffce7; border-style: solid; border-radius: 7px; border-width: 1px 2px 3px 1px; border-color: #fff8c4 #fff8c4 #ece39c #fff8c4; font-family: Corbel, Arial; vertical-align: bottom;}
div.resourcesVideo{ position: absolute; left:5px; font-family: Corbel; font-size:11px; font-weight: bold; text-align: left; line-height: 70%;}
div.resourcesEE {position: absolute; left: 135px; font-family: Corbel; font-size:11px; font-weight: bold; line-height: 23px; text-align: left; line-height: 70%;}
span.resourcesMgr {position: absolute; left: 270px; font-family: Corbel; font-size:11px; font-weight: bold;  text-align: left; line-height: 70%;}
div.subHeaderBlurb {position: absolute; top: 80px; left: 130px; width: 400px; font-family: Segoe Print; font-size:12px; color:#3f3f3f;}
img.docIcon {vertical-align: middle; height: 23px; border: 0;}
img.docIconSmall {position: relative; left: 8px; height: 20px; border: 0;}
img.emailimg {height: 20px; border:0;}
img.empHdLn {position: absolute; top: 27px; right: 40px; width: 2px; height: 10px;}
img.mgrHdLn {position: absolute; top: 13px; right: 12px; width: 2px; height: 26px;}
img.playButton {vertical-align: middle; height: 20px; border: 0;}
img.helpicon {float: left;  height:20px; border:0;}
span.resourceTxt {width: 100px; height: 20px; vertical-align: middle;}
table.contactsGrid {width:500px;}
table.helpTbl {width:500px; border-color:#FFFFFF; border-radius: 10px; border-width: 1px; border-style: dotted; padding: 0px; border-spacing: 0px}
table.hlpCtgTbl {padding: 0px; border-spacing: 0px; border-width: 0px; border-radius: 10px; width: 100%; background-color: #fffce7;}
table.maintable {position: absolute; top: 0px; left: 0px; width: 582px; border-width: 0px; border-color: #000; padding: 0px; border-spacing: 0px;}

td.actnMgrSpc {padding-left: 5px;} 
td.actnVertLn {border-right: dotted 1px; border-color: #ededed; padding-left: 5px; padding-right: 5px;}
td.contacts {color:#FFFFFF;  text-align: left; vertical-align:top; margin: 20px; border-color:#a0a6a7; border-bottom: dotted 1px; font-family: Corbel; font-size: 12px;}
td.contactshdr {color:#FFFFFF; text-align: left; vertical-align:top; margin: 20px; border-color:#a0a6a7; border-bottom: dotted 1px; font-family: Corbel; font-weight: bold; font-size: 12px;}
td.gridheader {position: relative; font-family: Corbel; font-size:12px; font-weight: bold; background:url("images/ActionTableGradient.gif");  background-repeat: repeat; background-size: 462px 35px;}
td.gridsubheader {font-family: Corbel; font-size:13px; font-weight: bold; color: #3f3f3f; padding-right: 4px;}
td.gridtext {font-family: Corbel; font-size:12px; color: #000000; height: 35px;}
td.divider {border-bottom: dotted 2px; border-color: #c5c5c5 #ededed #c5c5c5 #ededed;}
td.header {width: 440px; padding: 0px;}
td.helpborder {border-right: double 3px; border-color: #fc1919; width: 35px;}
td.helpList {z-index: 5; background-color: #fffce7; border-style: solid; border-radius: 10px; border-width: 1px 2px 3px 1px; border-color: #fff8c4 #fff8c4 #ece39c #fff8c4; font-family: Corbel; font-size:8px; font-weight:normal; vertical-align: top; width: 400px; height: 100%;}
td.linksList {vertical-align:top;}
tr.helpItem {font-family: Corbel; font-size:12px; font-weight:normal; vertical-align: middle; height: 25px;}
tr.helpItemHiglight {font-family: Corbel; font-size:12px; font-weight:normal; vertical-align: middle; height: 25px; background-color: #FFFEF4; cursor:pointer; border-radius: 10px; border-width: 1px 2px 3px 1px;}
ul, li {list-style-type: circle; padding: 0; margin-left: 10; font-weight: bold;}

这是我的iframe

---

这是其中一个季度的JS，我们不是来帮您解决编程任务的。请提供您遇到的问题的最小示例。没有让任何人分心的拐杖。如果所有内容都在您的帖子中可见，并且没有外部链接，则可获得额外积分。

<div id="content"></div>
<script type='text/javascript'>

    var dd = "Language ";
        dd = dd + "<select id=\"langselector\" onchange=\"writeiFrame(this.options[this.selectedIndex].value)\">";
        dd = dd + "<option value=\"English\">Select One</option>";
        dd = dd + "<option value=\"English\">English</option>";
        dd = dd + '<option value="Japanese">Japanese</option>';
        dd = dd + '<option value="Chinese">Chinese</option>';
        dd = dd + '<option value="French">French</option>';
        dd = dd + '<option value="Korean">Korean</option>';
        dd = dd + '<option value="Polish">Polish</option>';
        dd = dd + '<option value="Portuguese">Portuguese</option>';
        dd = dd + '<option value="Russian">Russian</option>';
        dd = dd + '<option value="Spanish">Spanish</option>';
        dd = dd + '<option value="Turkish">Turkish</option>';
        dd = dd + '</select><br/>'

    var cntr = 0;
    function writeiFrame(lang){
        var ifrmtag = dd + '<iframe src="C:/Temp/WHN/WHN.html" scrolling="no" width="582" height="430" id="contentFrame" name="' + lang + '-SP' + '" frameborder="no"></iframe>';
        document.getElementById("content").innerHTML =ifrmtag;
        cntr = cntr + 1;

    }
    writeiFrame('English');
</script>