I want to bring two div's in a single div - css

Question

My page is divided in 3 parts and i have used flex box model for the layout. First part is top-panel.jsp which i have included explicitly in every page of my website. second part is left body and third is right body which i divided using the concept of "div" and flex but now i want to bring the left-body div and right-body div into a single div but it is not working on my page.
The code is:
<%# include file="top-panel.jsp" %>
<div class="left_body">
<!-- Heading Pannel Starts Here -->
<div class="welcome">
<p id="heading-pannel">Welcome ${username}</p>
<hr id="hr-thick">
</div>
${shortcut}
<div class="form_area">
<p> ${status} </p>
<div>
<c:if test="${emptyNotificationMessage!= null}">
</c:if>
<c:if test="${notifications!= null}">
<h3>Tasks pending</h3>
<hr id="hr-thin" />
<div>
<c:forEach items="${notifications}" var="next">
<form method="post" action="viewForm.htm">
<img src="images/addon/u175.png" alt="pointer" class="pointer" />
<input type="hidden" name="refNum" value="${next.key}"> ${next.value}
<input type="submit" value="View Form">
</form>
<br>
</c:forEach>
</div>
</c:if>
<c:if test="${appHistory!= null}">
<br/>
<br/>
<br/>
<br/>
<br/>
<h3>Application under review</h3>
<hr id="hr-thin" />
<div>
<c:forEach items="${appHistory}" var="next">
<img src="images/addon/u175.png" alt="pointer" class="pointer" /> ${next.value}
<br>
</c:forEach>
</div>
</c:if>
${myProjectsHeader}
<div id="myProjects">
<c:forEach items="${myProjects}" var="next">
<form method="post" action="viewIndividualProject.htm">
<input type="submit" value="${next.key}" class="transparent_btn">
<input type="hidden" name="individualProjectLink" value="${next.value}">
<input type="hidden" name="individualProjectName" value="${next.key}">
</form>
<br>
</c:forEach>
</div>
</div>
</div>
</div>
<div class="right_body">
<div class="right-box">
<h3 class="h3-sty2">Do you Know</h3>
<p>
<h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p>
<p>
<h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<p>
<h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<hr id="hr-right-panel">
<p>
<h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p>
<div> For any query e-mail to rndops#iitg.ernet.in </div>
</div>
</div>
When i add the whole code of left body and right body in a single div, The layout completely goes away. If someonecan help me resolve it. it would be great.
The css of left body and right body is:
.left_body {
position: relative;
width: 69%;
margin-top: 1px;
}
.right_body {
position: relative;
/* display:block; */
width: 29%;
/* margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px; */
}
.right-box {
margin-top: 48px;
border: thin solid #BDBDBD;
border-radius: 5px;
}

Answer 1

You needs to use float and clearfix class. please see the demo.
.left_body {
position: relative;
width: 69%;
margin-top: 1px;
float: left;
}
.right_body {
position: relative;
display: block;
width: 29%;
float: left;
}
.clearfix:after{
content: " ";
display: table;
}
.clearfix:before{
content: " ";
display: table;
}
.clearfix{
clear: both;
}
<div class="main clearfix">
<div class="left_body">
<!-- Heading Pannel Starts Here -->
<div class="welcome">
<p id="heading-pannel">Welcome ${username}</p>
<hr id="hr-thick">
</div>
${shortcut}
<div class="form_area">
<p> ${status} </p>
<div>
<c:if test="${emptyNotificationMessage!= null}">
</c:if>
<c:if test="${notifications!= null}">
<h3>Tasks pending</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${notifications}" var="next">
<form method="post" action="viewForm.htm">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
<input type="hidden" name="refNum" value="${next.key}">
${next.value}
<input type="submit" value="View Form">
</form>
<br>
</c:forEach>
</div>
</c:if>
<c:if test="${appHistory!= null}">
<br/><br/><br/><br/><br/>
<h3>Application under review</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${appHistory}" var="next">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
${next.value}
<br>
</c:forEach>
</div>
</c:if>
${myProjectsHeader}
<div id="myProjects">
<c:forEach items="${myProjects}" var="next">
<form method="post" action="viewIndividualProject.htm">
<input type="submit" value="${next.key}" class="transparent_btn">
<input type="hidden" name="individualProjectLink" value="${next.value}">
<input type="hidden" name="individualProjectName" value="${next.key}">
</form>
<br>
</c:forEach>
</div>
</div>
</div>
</div>
<div class="right_body">
<div class="right-box">
<h3 class="h3-sty2">Do you Know</h3>
<p><h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<hr id="hr-right-panel">
<p><h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p>
<div> For any query e-mail to rndops#iitg.ernet.in </div>
</div>
</div>
<div>

Answer 2

Try this in place of your stylesheet.
.left_body{
position:relative;
width:69%;
margin-top:1px;
margin-right: 0px;
margin-left: 0px;
float: left;
height: 100%;
}
.right_body{
position:relative;
/* display:block; */
width:29%;
/* margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px; */
margin-right: 0px;
margin-left: 0px;
float: left;
height: 100%;
}
.right-box{
margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px;
}
.main_body{
width: 100%;
height: 100%;
}
and your code should be like this :-
<body>
<div class="main_body">
<div class="left_body">
<!-- Heading Pannel Starts Here -->
<div class="welcome">
<p id="heading-pannel">Welcome ${username}</p>
<hr id="hr-thick">
</div>
${shortcut}
<div class="form_area">
<p> ${status} </p>
<div>
<c:if test="${emptyNotificationMessage!= null}">
</c:if>
<c:if test="${notifications!= null}">
<h3>Tasks pending</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${notifications}" var="next">
<form method="post" action="viewForm.htm">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
<input type="hidden" name="refNum" value="${next.key}">
${next.value}
<input type="submit" value="View Form">
</form>
<br>
</c:forEach>
</div>
</c:if>
<c:if test="${appHistory!= null}">
<br/><br/><br/><br/><br/>
<h3>Application under review</h3>
<hr id="hr-thin"/>
<div>
<c:forEach items="${appHistory}" var="next">
<img src="images/addon/u175.png" alt="pointer" class="pointer"/>
${next.value}
<br>
</c:forEach>
</div>
</c:if>
${myProjectsHeader}
<div id="myProjects">
<c:forEach items="${myProjects}" var="next">
<form method="post" action="viewIndividualProject.htm">
<input type="submit" value="${next.key}" class="transparent_btn">
<input type="hidden" name="individualProjectLink" value="${next.value}">
<input type="hidden" name="individualProjectName" value="${next.key}">
</form>
<br>
</c:forEach>
</div>
</div>
</div>
</div>
<div class="right_body">
<div class="right-box">
<h3 class="h3-sty2">Do you Know</h3>
<p><h5>The total period of absence on Casual <br> Leave(CL) including Sundays and <br> other holidays intervening, prefixing <br> and/or suffixing shall not ordinarily <br> exceed 9 days at a time.<br>Read Leaves rules</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<p><h5>Fact 2 comes here.Would be nice if <br> the information presented is related <br> to leaves.<br>Read Relevant link</h5></p>
<hr id="hr-right-panel">
<p><h5>Are you new to Rnd Automation System?<br>Read FAQs.</h5></p>
<div> For any query e-mail to rndops#iitg.ernet.in </div>
</div>
</div>
</div>
</body>

Answer 3

If you completely want to remove the left_body and right_body tags from your page just remove them and try this :-
.right-box{
margin-top: 48px;
border:thin solid #BDBDBD;
border-radius:5px;
width: 29%;
}
.form_area{
width: 69%;
}