CODEWITHSUNDEEP
csshtmlforms
batuman
batuman

Reputation: 7304

Locating form elements side by side

I have two form elements one is vertical-dot-navigation (https://github.com/Robaum/Vertical-Dot-Navigation/commit/128bfe1c236139184). I'd like to locate it side by side with a form element <div>.

I arrange in html as 

<body>
<form  class="summarybackground" name="summary"  id="summary" style="height:550px;width:920px;overflow-y:auto;"  method="post">

  <div class="myBox" id="section"> 
    <div class="dotstyle dotstyle-scaleup">

    <ul>
       <li class="current"><a href="#">section1</a></li>
       <li><a href="#">section2</a></li>
       <li><a href="#">section3</a></li>
       <li><a href="#">section4</a></li>
       <li><a href="#">section5</a></li>       
    </ul>
    </div>


    <div class="col-sm-9">



      <div id="section1">    
        <h1>Landed</h1>

      </div>
      <div id="section2"> 
        <h1>Apartment</h1>

      </div>
      <div id="section3">         
        <h1>Condominium</h1>

      </div>

      <div id="section4">         
        <h1>Commercial</h1>

      </div> 

      <div id="section5">         
        <h1>Farm</h1>

      </div>

  </div>

</form>
</body>

It is shown in the attached picture (fig). The problem is they are not arranged as side by side.

The CSS code is shown below and component.css for vertical-dot-navigation is here.

/*This is for summary view*/
.summarybackground {background-color:#3E3947;}
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 800px;
height: 500px;
margin-bottom: 150%;
}
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: yellowgreen;  
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: #88ba1c;  
}

  div.col-sm-9 div {
      height: 500px;
      font-size: 28px;
  }
  #section1 {color: #fff; background-color: #1E88E5;}
  #section2 {color: #fff; background-color: #673ab7;}
  #section3 {color: #fff; background-color: #ff9800;}
  #section4 {color: #fff; background-color: #00bcd4;}
  #section5 {color: #fff; background-color: #009688;}



/*This is for summary view*/

Upvotes: 0

Views: 68

Answers (3)

Ashvin Jadav
Ashvin Jadav

Reputation: 134

you have div class .dotstyle have no float defined

if you want to make it right set your css class as below:

.dotstyle{ 
  float:right
 }

Upvotes: 0

Adhir Pandit
Adhir Pandit

Reputation: 1

you can float vertical-dot-navigation to right.

.dotstyle { 
  float:right
 }

Hope this will solve your problem, if you still have problem please share working demo on jsfiddle.

Upvotes: 0

jsg
jsg

Reputation: 1264

Maybe trying to put an absolute position on the dotstyle class

.dotstyle{
    position:absolute;
    right:10px;
    top:100px

}

Upvotes: 1

Related Questions