Is it possible to have two columns side by side with dynamic text using only CSS? I'm trying to make the left main text "break" into a new line when it reaches the right category, which is also dynamic. Do I need to use JavaScript for this?
https://i.sstatic.net/Sc9IH.png !
<div class="news-item">
<div class="news-pic">
<a href="#">
<img src="" width="126" height="80" alt="">
</a>
</div>
<div class="news-description">
<h3><a href="#">Long post title this is. What is this? this is a long post title. Even longer. (dynamic)</a></h3>
<a href="#" class="category-name">Longer category name (dynamic)</a>
<div style="clear:both"></div>
<small><i>Published {{ post.published|date:"j. F Y" }}</i></small>
<p class="text-min">Blah blah body</p>
<div style="clear:both"></div>
</div>
<div style="clear: both"></div>
</div>
html, body {
font-size: 13px;
font-family: arial;
}
.news-item {
padding: 10px 10px 10px 10px;
border: 1px solid #f2f2f2;
cursor: default;
width: 658px;
margin: 10px 0 20px 0;
border-radius: 5px;
}
.news-pic {
display: inline-block;
vertical-align: top;
padding: 3px;
border: 1px solid #DADADA;
margin-right: 10px;
background: white;
}
.news-description {
margin-left: 0;
display: inline-block;
width: 510px;
}
.news-description h3 {
margin: 0;
float: left;
font-size: 15px;
}
.news-description h3 a {
text-decoration: none;
color: #137541;
}
.category-name {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
text-decoration: none;
padding: 1px 4px 1px 5px;
font-weight: bold;
border: 1px solid #dadada;
border-right: none;
background: rgba(215, 214, 214, .2);
color: #807f7f;
white-space: nowrap;
display: inline-block;
font-size: 10px;
margin-right: -11px;
z-index: 5;
float: right;
}
Any suggestions or advice are greatly appreciated. Thanks a lot! :)