html - Putting div elements inline -

i want make timeline has broken structure. think because of display:inline, , if tried site, break it. display: inline-block funks up.

i tried display: inline overall div containing timeline , didn't work. did divs in timeline , didn't work either.

timeline:

<span class = "timelinefull">     <div ng-controller="maincontroller">         <div class="timeline">                           <!-- anchor dot -->             <div class= "dot">                 <div ng-mouseover="infoisvisible = true" ng-mouseleave="infoisvisible = false"   ng-mouseover="getcoords(event)">                     <img class="icon" ng-src="img/icon_dot.png" height="30px" width="30px">                 </div>                  <div class="info label label-info" id="info" ng-show="infoisvisible">                     <p>was born</p>                 </div>             </div>              <!-- rest of dots -->              <div class="dot" ng-repeat="timelineevent in timelineevents">                 <timeline-info info="timelineevent"></timeline-info>             </div>                   </div>     </div> </span> 

template ng-repeat:

<div class="timeline-inner" ng-init="infoisvisible= false">     <img class="line" src="components/timeline/template-timeline/img/line.png" height="5px" width="{{ info.months }}">     <div ng-mouseover="infoisvisible = true" ng-mouseleave="infoisvisible = false"   ng-mouseover="getcoords(event)">         <a href="{{ info.link }}">             <img class="icon" id="icon" ng-src="{{ info.icon }}" height="30px" width="30px">         </a>     </div>  </div>  <div class="info label label-info" id="info" ng-show="infoisvisible">     <p>{{ info.description }}</p>     <p style="font-size: 8px"> click more info </p> </div> 

css

.timelinefull {     display: inline; }  .timeline-inner {     display: inline; }  .info {     display: inline;     padding-top: 10px;     position: absolute;     z-index: 100;     -webkit-transition:all linear 0.3s;     transition:all linear 0.3s; }  .line {     box-shadow: 0 0 0 2px rgba(0,0,0,.05);     margin-left: -5px;     margin-right: -5px; }  .info.ng-hide {     opacity:0; }  a:link {     text-decoration: none; } 

thanks help!

you have 3 options, choose display property of element in css:

inline elements:

1. respect left & right margins , padding, not top & bottom
2. cannot have width , height set
3. allow other elements sit left , right.

block elements:

1. respect of those
2. force line break after block element

inline-block elements:

1. allow other elements sit left , right
2. respect top & bottom margins , padding
3. respect height , width

so, it's better put display:inline-block elements these classes:

• dot
• timeline-inner

like this:

timeline dot, timeline timeline-inner{     display: inline-block; } 

please dont forget put enough time provide summarized, though useful version of code, including markup , css, let people reproduce final results.