Putting div elements inline

Question

I want to make a timeline but it has broken structure. I think that is because of display:inline, and if I tried to do that to my site, it would break it. display: inline-block also funks it up.

I tried to display: inline to the overall div containing the timeline and that didn't work. So then I did it to all the divs that were also in the timeline and that 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 MY DOTS -->

            <div class="dot" ng-repeat="timelineEvent in timelineEvents">
                <timeline-info info="timelineEvent"></timeline-info>
            </div>          
        </div>
    </div>
</span>

Template for 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 for 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 for the help!

Answer 1

You have 3 options, to choose for the display property of an element in CSS:

Inline elements:

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

Block elements:

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

Inline-block elements:

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

So, it's better to put display:inline-block for elements with these classes:

• dot
• timeline-inner

like this:

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

Please dont forget to put enough time to provide a summarized, though useful version of your code, including Markup and CSS, to let people reproduce final results.

Answer 2

Try adding the following to your CSS

.timeline, .timeline .dot, .timeline-inner, .timelinefull {
    display:inline-block;
}
.timeline, .timelinefull {
    width:100%;
}

Update:

Shot in the dark, without a snippet..

Could you add to your css

.dot .timeline-inner {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

The above code will vertically center .timeline-inner. From your screenshot it seems because the elements are now display-inline they only take up as much space as they need (the correct behaviour), however, you need the elements to align vertically centered within the timeline.