How to postion text correctly with css?

user_7916141 0
Viewed 52

enter image description hereI have a span ("numberCounter") containing a number that I styled to have a fade layer: This is the link of the page

I cannot use "float:right" correctly on it is there a solution to position it in the right part of the div without using (left right margin-left margin-right) ?

<section class="horizontal-timeline" id="timeline" style="background-image: url(https://www.nicepng.com/png/detail/197-1971420_timeline-timeline-png.png) !important;    background-size: cover;">
  <h2 id="timeline-title">là où tout a commencé</h2>
  <div class="events-content">
    <span id="numberCounter" class="1946">1946</span>
    <ol>

      <li class="selected" data-horizontal-timeline='{"date": "16/01/1946"}'>
        <div class=" col-md-6 " style="    height: 100%;">
          <img src="https://i.picsum.photos/id/247/200/300.jpg?hmac=DOAWkFIrJUIvEj0t5qAsGiVgyTn8_e8EicBaXPCQge8">
        </div>
        <div class="desc-slider col-md-6">
          <h3>Post</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>

      </li>
    </ol>
  </div>
</section>

css html
2 Answers

Use position: absolute:

position: absolute;
top: 0;
right: 0;

Don't forget the parent element needs a position: relative

user_116111280

Can you try these codes? With flex

#timeline-title {
  text-align:center;
}

ol {
  padding:0;
}

.flexible {
  display:flex;
  justify-content:space-around;
  align-items:center;
}

.desc-slider {
  width:50%;
}
<section class="horizontal-timeline" id="timeline" style="background-image: url(https://www.nicepng.com/png/detail/197-1971420_timeline-timeline-png.png) !important;    background-size: cover;">
    <h2 id="timeline-title">là où tout a commencé</h2>
    <div class="events-content">
        <span id="numberCounter" class="1946">1946</span>
        <ol>
            <li class="flexible" class="selected" data-horizontal-timeline='{"date": "16/01/1946"}'>
                <div class=" col-md-6 " style="    height: 100%;">
                    <img src="https://i.picsum.photos/id/247/200/300.jpg?hmac=DOAWkFIrJUIvEj0t5qAsGiVgyTn8_e8EicBaXPCQge8">
                </div>
                <div class="desc-slider col-md-6">
                    <h3>Post</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </li>
        </ol>
    </div>
</section>

user_137000000
Related