3

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>

2 Answers 2

0

Use position: absolute:

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

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

1
  • the problem is with "color: transparent;" when i remove it the css works ... Commented Mar 24, 2021 at 14:59
0

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>

1
  • tried it no luck maybe the error is with css i am using on "1946" Commented Mar 25, 2021 at 8:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.