CODEWITHSUNDEEP
htmlcss
Masquer
Masquer

Reputation: 290

Is there a way to stretch parent div or not?

My question is not so specific so I could ask it without example, so here is my case: let's say I have a list of books, that I display inside of parent div, that has dimensions. List might be larger than parent div or not, but if so, there are scrollbars. Book has it's title and some optional specs with server-side defined widths.

What I need is, that book specs would stretch inner container, but the title would not, being cut with ellipsis.

I could only do it with some js, feels lame, so please, is there a way to make it with css only?

<div id="outer">
  <div id="inner">
    <div class="book">
      <div class="title">The Persecution and Assassination of Jean-Paul Marat as Performed by the Inmates of the Asylum of Charenton Under the Direction of the Marquis de Sade</div>
      <div class="attrs">
        <div class="item" style="width:200px">Author: Peter Weiss</div>
        <div class="item" style="width:200px">Rating: 4.03</div>
        <div class="item" style="width:300px">Published December 1st 2001 by Waveland Pr Inc (first published 1963)</div>
      </div>
    </div>
    <div class="book">
      <div class="title">1984</div>
      <div class="attrs">
        <div class="item" style="width:200px">Author: George Orwell</div>
        <div class="item" style="width:200px">Rating: 4.15</div>
      </div>
    </div>
  </div>
</div>

Here is the pen to illustrate: https://codepen.io/Masquer/pen/rdwJzQ

Upvotes: 0

Views: 152

Answers (2)

Mr Lister
Mr Lister

Reputation: 46549

The actual problem is much simpler than your code indicates, but it's as follows:
The width of the #inner container should be determined by its contents (not counting the title), and the title is only as wide as the container. No matter the width of the contents. That's it.

So the solution is simple: don't let the title count for the width. In other words, give the title position: absolute.

#inner {
  background:#bbb;
  display:inline-block;
}

.title {
  background:#ddd;
  height:30px; margin:1em;
  position:relative;
}

.title > span {
  position:absolute;
  width:100%; line-height:30px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.contents {
  background:#ddd;
  margin:1em;
}
.contents img {
  vertical-align:top;
}
<div id="inner">
 <div class="title">
  <span>A very, very, very, very, very, very, very, very, very, very, very, very, very, very long title</span>
 </div>
 <div class="contents">
  <img src="https://placehold.it/400x100" alt="400x100">
 </div>
</div>

In this example I never set widths in pixels anywhere, so it's as wide as the picture inside, ignoring the width of the title. (You can use a different picture, or a text, and it will adjust to the new width.)

It took me a while to hit upon the solution, but the structure of your example pushed me in the wrong direction at first. Sorry. For example, the #outer container isn't necessary to demonstrate the problem. You can put an outer container around this code if you want.

Upvotes: 1

Piotr Mirosz
Piotr Mirosz

Reputation: 866

IF you use white-space: nowrap; it will do your work.

 .title {
  box-sizing: border-box;
  padding: 10px;
  background-color: #ddd;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

If you need "..." on end you need to describe max-width of that line so overflow will be ellipsis.

.title {
  box-sizing: border-box;
  padding: 10px;
  background-color: #ddd;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width:800px;

}

Upvotes: 0

Related Questions