In the attached screenshot I have the podcast episodes which are fixed width and positioned relative. As you can see the podcast episode number (green circle) is positioned absolutely within the podcast episode.
However, I also have a sidebar floated right, in which case the podcast episode should wrap around the sidebar, as they now do.
My question is this: in this scenario, is there any way to have the podcast episode number display relative to the wrapped episode (top right corner) when next to the sidebar?
HTML
<main>
<article class="podcasts">
<section class="podcast-episode">
<div class="podcast-id">68</div>
</section>
<section class="podcast-episode">
<div class="podcast-id">67</div>
</section>
</article>
<aside class="sidebar">
<section class="advert"></section>
<section class="enews"></section>
</aside>
</main>
CSS
.podcasts {
max-width: 900px;
}
.podcast-episode {
position: relative;
}
.podcast-id {
position: absolute;
top: -8px;
right: -10px;
}
.sidebar {
width: 300px;
float: right;
}
Here is a rough CodePen of the example in more detail.
Try this. For this you have to give position:relative to .podcast-episode class and remove overflow:hidden.
.container{
width:96%;
margin:0 auto;
}
#sidebar {
width: 300px;
float: right;
margin: 0 6em 3em;
}
article {
display: block;
}
.podcast {
position: relative;
/*max-width: 900px;*/
margin: 4em auto;
}
.podcast-episode {
background-color: rgba(0,0,0,0.025);
border-radius: 5px;
margin-bottom: 4em;
/*overflow: hidden;*/
display: flex;
flex-flow: row wrap;
counter-increment: numbered -1;
z-index: 1;
position: relative;
}
.podcast-episode:before {
content: counter(numbered);
position: absolute;
top: -8px;
right: -10px;
background-color: #85a463;
border-radius: 50%;
height: 30px;
width: 30px;
line-height: 30px;
text-align: center;
color: #fff;
font-size: 0.7em;
}
.podcast-episode .podcast-info {
width: 100%;
}
.podcast-episode .podcast-image {
width: 125px;
height: 125px;
float: left;
line-height: 0;
margin-right: 1.5em;
}
.podcast-episode .podcast-image img {
width: 100%;
height: auto;
}
.podcast-episode .podcast-title {
font-size: 1.15em;
margin: 0 0 0.25em;
padding-top: 1.15em;
}
.podcast-episode .podcast-meta {
font-size: 0.825em;
line-height: 1.5em;
list-style: none;
margin: 0;
padding: 0;
}
.podcast-episode .podcast-meta li {
display: inline-block;
margin-right: 0.75em;
}
.podcast-episode .podcast-meta li svg {
opacity: 0.8;
}
.podcast-episode .podcast-summary {
font-size: 0.9em;
line-height: 1.5em;
padding: 1.25em 1.5em 1.5em;
display: none;
}
.podcast-episode .podcast-audio {
width: 100%;
}<div class="container">
<aside id="sidebar">
<div id="ad-sidebar">
<div class="adspace">
<a href="https://www.rioproducts.com/freshwater/fly-line" target="_blank">
<img src="https://www.flyandstream.com/wp-content/uploads/2018/02/ad-300x600-rio.jpg" alt="Rio Products">
</a>
<span class="ad-meta"><a href="https://www.flyandstream.com/advertise/">Advertise with us</a></span>
</div>
</div>
</aside>
<article>
<div class="podcast">
<div class="podcast-episode">
<div class="podcast-info">
<div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
<h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
<ul class="podcast-meta">
<li class="podcast-date">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<time itemprop="datePublished" datetime="1522376107">5 days ago</time>
</li>
<li class="podcast-duration">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
49:00
</li>
<li class="podcast-details">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<a href="" title="View summary of podcast episode">View summary</a>
</li>
</ul>
</div>
<div class="podcast-summary">Miles Nolte is a writer based out of Montana. He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal. I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today. I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
<div class="podcast-audio"></div>
</div>
</div>
<div class="podcast">
<div class="podcast-episode">
<div class="podcast-info">
<div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
<h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
<ul class="podcast-meta">
<li class="podcast-date">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<time itemprop="datePublished" datetime="1522376107">5 days ago</time>
</li>
<li class="podcast-duration">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
49:00
</li>
<li class="podcast-details">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<a href="" title="View summary of podcast episode">View summary</a>
</li>
</ul>
</div>
<div class="podcast-summary">Miles Nolte is a writer based out of Montana. He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal. I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today. I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
<div class="podcast-audio"></div>
</div>
</div>
<div class="podcast">
<div class="podcast-episode">
<div class="podcast-info">
<div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
<h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
<ul class="podcast-meta">
<li class="podcast-date">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<time itemprop="datePublished" datetime="1522376107">5 days ago</time>
</li>
<li class="podcast-duration">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
49:00
</li>
<li class="podcast-details">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<a href="" title="View summary of podcast episode">View summary</a>
</li>
</ul>
</div>
<div class="podcast-summary">Miles Nolte is a writer based out of Montana. He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal. I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today. I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
<div class="podcast-audio"></div>
</div>
</div>
<div class="podcast">
<div class="podcast-episode">
<div class="podcast-info">
<div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
<h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
<ul class="podcast-meta">
<li class="podcast-date">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<time itemprop="datePublished" datetime="1522376107">5 days ago</time>
</li>
<li class="podcast-duration">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
49:00
</li>
<li class="podcast-details">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<a href="" title="View summary of podcast episode">View summary</a>
</li>
</ul>
</div>
<div class="podcast-summary">Miles Nolte is a writer based out of Montana. He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal. I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today. I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
<div class="podcast-audio"></div>
</div>
</div>
<div class="podcast">
<div class="podcast-episode">
<div class="podcast-info">
<div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
<h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
<ul class="podcast-meta">
<li class="podcast-date">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<time itemprop="datePublished" datetime="1522376107">5 days ago</time>
</li>
<li class="podcast-duration">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
49:00
</li>
<li class="podcast-details">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<a href="" title="View summary of podcast episode">View summary</a>
</li>
</ul>
</div>
<div class="podcast-summary">Miles Nolte is a writer based out of Montana. He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal. I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today. I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
<div class="podcast-audio"></div>
</div>
</div>
<div class="podcast">
<div class="podcast-episode">
<div class="podcast-info">
<div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
<h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
<ul class="podcast-meta">
<li class="podcast-date">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<time itemprop="datePublished" datetime="1522376107">5 days ago</time>
</li>
<li class="podcast-duration">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
49:00
</li>
<li class="podcast-details">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<a href="" title="View summary of podcast episode">View summary</a>
</li>
</ul>
</div>
<div class="podcast-summary">Miles Nolte is a writer based out of Montana. He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal. I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today. I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
<div class="podcast-audio"></div>
</div>
</div>
<div class="podcast">
<div class="podcast-episode">
<div class="podcast-info">
<div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
<h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
<ul class="podcast-meta">
<li class="podcast-date">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<time itemprop="datePublished" datetime="1522376107">5 days ago</time>
</li>
<li class="podcast-duration">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
49:00
</li>
<li class="podcast-details">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<a href="" title="View summary of podcast episode">View summary</a>
</li>
</ul>
</div>
<div class="podcast-summary">Miles Nolte is a writer based out of Montana. He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal. I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today. I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
<div class="podcast-audio"></div>
</div>
</div>
<div class="podcast">
<div class="podcast-episode">
<div class="podcast-info">
<div class="podcast-image"><img src="https://static.libsyn.com/p/assets/d/2/e/e/d2ee84163da0ca07/banner2.jpg" alt="Podcast Image"></div>
<h3 class="podcast-title">Miles Nolte - The Alaska Chronicles</h3>
<ul class="podcast-meta">
<li class="podcast-date">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<time itemprop="datePublished" datetime="1522376107">5 days ago</time>
</li>
<li class="podcast-duration">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
49:00
</li>
<li class="podcast-details">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus">
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
<a href="" title="View summary of podcast episode">View summary</a>
</li>
</ul>
</div>
<div class="podcast-summary">Miles Nolte is a writer based out of Montana. He is also a guide, teacher, and the fly-fishing editor at Gray’s Sporting Journal. I’ve been a fan of Miles since reading his brilliant book, The Alaska Chronicles, and I was eager to hear more about how he came to be the writer he is today. I met up with Miles in New Zealand where we discussed writing, guiding, and fly-fishing films.</div>
<div class="podcast-audio"></div>
</div>
</div>
</article>
</div>