CODEWITHSUNDEEP
htmlcssjsplayoutfrontend
Travelling Salesman
Travelling Salesman

Reputation: 2281

How to Place div elements next to each other?

I am a beginner in CSS. In a JSP page, I have two divs that are under each other. Each div carries a field, button, and a table. I need to place the fields, tables, and buttons, next to each other instead of under each other. Below is my JSP for the 2 divs. How to achieve what i want?

First div:

            <div class="panel panel-default">
            <div class="panel-heading"><b><spring:message code="supportive.criterea.section.label"/></b></div>
            <div class="panel-body ">

                <div class="form-group col-lg-3 col-xs-12 float2">
                  <c:forEach items="${serviceFields}" var="serviceField">
                     <c:if test="${serviceField.columnName == 'v38'}">
                         <label for="criterea"> 
                              <c:choose>
                                <c:when test="${i18n.language == 'en' }">${serviceField.labelEn}</c:when>
                                <c:otherwise>${serviceField.labelAr}</c:otherwise>
                              </c:choose>
                                    <c:if test="${serviceField.isRequired == 1}">
                                        <span class="required">&nbsp;</span>
                                    </c:if> 
                               </label>
                         <input type="text" value="${requestDetails.v38}"                       
                            class="form-control input-sm <c:if test="${serviceField.isRequired == 1 && step.isStart == 1}"> mandatory</c:if>"  
                            name="v38" id="criterea" <c:if test="${step != null && step.isStart != 1}"> disabled</c:if> />
                     </c:if>
                  </c:forEach>
              </div>


              <div class="col-lg-2 col-xs-12 float2" style="padding-top: 20px;">
                        <label for="add">&nbsp;</label>
                        <label class="btn-is">
                            <img class="docIcon" src="${pageContext.request.contextPath}/images/icons/buttons/add-request.png" />&nbsp;<spring:message code="addToList.label"/>
                            <input type="button" id="add_criterea" class="col-xs-12 col-lg-5 col-md-6" <c:if test="${step != null && step.isStart != 1}"> disabled</c:if> style="display: none;"/>
                        </label>
             </div>

            <div class="form-group col-lg-6 col-xs-12 float2" id="jobSuccessionListDiv">
                <jsp:include page="../../common/career-replacement-list.jsp"/>
            </div>



            </div>
            </div>

Second div

    <div class="panel panel-default">
    <div class="panel-heading"><b><spring:message code="required.tasks.label"/></b></div>
    <div class="panel-body">


      <div class="form-group col-lg-3 col-xs-12 float2">
          <c:forEach items="${serviceFields}" var="serviceField">
             <c:if test="${serviceField.columnName == 'v39'}">
                 <label for="tasks"> 
                      <c:choose>
                        <c:when test="${i18n.language == 'en' }">${serviceField.labelEn}</c:when>
                        <c:otherwise>${serviceField.labelAr}</c:otherwise>
                      </c:choose>
                            <c:if test="${serviceField.isRequired == 1}">
                                <span class="required">&nbsp;</span>
                            </c:if> 
                       </label>
                 <input type="text" value="${requestDetails.v39}"                       
                    class="form-control input-sm <c:if test="${serviceField.isRequired == 1 && step.isStart == 1}"> mandatory</c:if>"  
                    name="v39" id="tasks" <c:if test="${step != null && step.isStart != 1}"> disabled</c:if> />
             </c:if>
          </c:forEach>
      </div> 


      <div class="col-lg-2 col-xs-12 float2" style="padding-top: 20px;">
                <label for="add">&nbsp;</label>
                <label class="btn-is">
                    <img class="docIcon" src="${pageContext.request.contextPath}/images/icons/buttons/add-request.png" />&nbsp;<spring:message code="addToList.label"/>
                    <input type="button" id="add_task" class="col-xs-12 col-lg-5 col-md-6" <c:if test="${step != null && step.isStart != 1}"> disabled</c:if> style="display: none;"/>
                </label>
     </div>

    <div class="col-lg-12 col-xs-12" id="jobSuccessionListDiv_1">
        <jsp:include page="../../common/career-replacement-list-1.jsp"/>
    </div>



    </div>      

    </div>

Upvotes: 0

Views: 367

Answers (2)

Vikas Kumar
Vikas Kumar

Reputation: 31

<div class="d-flex">
   <div class="innerDiv"></div>
   <div class="innerDiv"></div>
</div>
<style>
.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}`
.innerDiv {
   padding-left: 15px;
   padding-right:15px;
}

</style>

Upvotes: 0

lorenzw
lorenzw

Reputation: 396

Make a container div, in which both of your div's are located. This div needs to be of display:flex and flex-direction:row:

<div style="display:flex; flex-direction:row">
<div id="firstdiv"></div>
<div id="seconddiv"></div>
</div>

The other solution would be, to add display:inline-block to both of your div's

Upvotes: 2

Related Questions