Reputation: 1338

Align text (2 lines) with thumbnail

Im currently working on a method to display a list of movies with thumbnail of the cover, the title and the date of release. The whole thing works fine for short titles but if it comes to longer titles the whole thing gets messed up.

Can you tell me how to align the text to the image that my result looks something like in the picture below ?

I´m thankful for all kind of tips.

Code (run snippet in "full page"-Mode for best experience)

header {
	background-color: grey;
	margin: 3px;
	padding-left: 7px;
}

header > h2 {
	display: inline-block;
}

#info {
	padding-left: 5px;
	margin: 1px;
	float: left;
	width: 69%;
}

#result {
	float: right;
	width: 29%;
	margin:1px;
}

.pillLink > h {
	display: inline-block;
}

.pillLink {
	display: inline-block;
	padding-left: 20px;
}

.pill > #cover {
	height: 100px;
	outline: 2px solid white;
}

.pill {
	
	padding: 7px;
	margin: 10px;
	background-color: silver;
	-webkit-border-radius: 7px!important;
	-moz-border-radius: 7px!important;
	border-radius: 7px!important;
	border: 1px solid grey
}

<html>
	<head>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="pills_style.css">
	</head>
	
	<body>
	
	<div id="info">
	
	</div>
	
	<div id="result">
	<h2>similar results</h2>
		<div>
			<div class="pill">
				<img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover">
				<a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Very Long Sample Text 4: A new Hope Extended Cut</h3></a>
				<span>(2014)</span>
			</div>
			
			<div class="pill">
				<img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover">
				<a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Very Long Sample Text 7: The Force Awakens 3D</h3></a>
				<span>(2014)</span>
			</div>
			
			<div class="pill">
				<img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover">
				<a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Short Sample Text 10: XXS</h3></a>
				<span>(2014)</span>
			</div>
		</div>
	</div>
	
	
	</body>
</html>

This is how it should look like:

Upvotes: 0

Answers (3)

Deepak Yadav

Reputation: 7109

You can also use Bootstrap's default component media-objects or you will have to change your html and css a little bit.

* {
  box-sizing: border-box;
  /* browser reset */
}
header {
  background-color: grey;
  margin: 3px;
  padding-left: 7px;
}
header > h2 {
  display: inline-block;
}
#result {
  float: left;
  width: 100%;
}
.pillLink > h {
  display: inline-block;
}
.pillLink {
  display: inline-block;
  padding-left: 10px;
}
.pill {
  padding: 7px;
  background-color: silver;
  -webkit-border-radius: 7px!important;
  -moz-border-radius: 7px!important;
  border-radius: 7px!important;
  border: 1px solid grey;
  margin-bottom: 20px;
  /* for giving some space at bottom */
  width: 100%;
  overflow: hidden;
  /* nothing goes outside */
}
.pill-img {
  width: 68px;
  /* some xyz width and height as you have given*/
  height: 100px;
  overflow: hidden;
  position: relative;
  z-index: 10;
  float: left;
  /* to make next div fall aside */
}
.pill-img img {
  max-width: 100%;
  height: auto;
}
.pill-text {
  margin-left: -68px;
  padding-left: 78px;
  position: relative;
  z-index: 5;
  width: 100%;
  float: left;
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="pills_style.css">

<div id="result">
  <h2>similar results</h2>
  <div>
    <div class="pill">
      <div class="pill-img">
        <img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg">
      </div>
      <div class="pill-text">
        <a href="http://www.imdb.com/title/tt0816692" class="pillLink">
          <h3>Very Long Sample Text 4: A new Hope Extended Cut</h3>
        </a>
        <span>(2014)</span>
      </div>
    </div>

    <div class="pill">
      <div class="pill-img">
        <img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg">
      </div>
      <div class="pill-text">
        <a href="http://www.imdb.com/title/tt0816692" class="pillLink">
          <h3>Very Long Sample Text 7: The Force Awakens 3D</h3>
        </a>
        <span>(2014)</span>
      </div>
    </div>

    <div class="pill">
      <div class="pill-img">
        <img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg">
      </div>
      <div class="pill-text">
        <a href="http://www.imdb.com/title/tt0816692" class="pillLink">
          <h3>Short Sample Text 10: XXS</h3>
        </a>
        <span>(2014)</span>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Sagar Kodte

Reputation: 3815

header {
	background-color: grey;
	margin: 3px;
	padding-left: 7px;
}

header > h2 {
	display: inline-block;
}

#info {
	padding-left: 5px;
	margin: 1px;
	float: left;
	width: 69%;
}

#result {
	float: right;
	width: 29%;
	margin:1px;
}

.pillLink > h {
	display: inline-block;
}

.pillLink {
	display: inline-block;
	padding-left: 20px;
    max-width: calc(100% - 75px);
}

.pill > #cover {
	height: 100px;
	outline: 2px solid white;
}

.pill {
	
	padding: 7px;
	margin: 10px;
	background-color: silver;
	-webkit-border-radius: 7px!important;
	-moz-border-radius: 7px!important;
	border-radius: 7px!important;
	border: 1px solid grey
}

<html>
	<head>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
		<link rel="stylesheet" type="text/css" href="pills_style.css">
	</head>
	
	<body>
	
	<div id="info">
	
	</div>
	
	<div id="result">
	<h2>similar results</h2>
		<div>
			<div class="pill">
				<img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover">
				<a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Very Long Sample Text 4: A new Hope Extended Cut <span>(2014)</span></h3></a>
				
			</div>
			
			<div class="pill">
				<img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover">
				<a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Very Long Sample Text 7: The Force Awakens 3D <span>(2014)</span></h3></a>
				
			</div>
			
			<div class="pill">
				<img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" id="cover">
				<a href="http://www.imdb.com/title/tt0816692" class="pillLink"><h3>Short Sample Text 10: XXS <span>(2014)</span> </h3></a>
				
			</div>
		</div>
	</div>
	
	
	</body>
</html>

Upvotes: -1

Keyboard ninja

Reputation: 755

Add the following line to the pillLink css class and you'll be fine

max-width: calc(100% - 75px);

[EDIT] Full snippet:

<div class="pill">
                <img src="http://3dprint.com/wp-content/uploads/2014/11/int3.jpg" class="cover">
    <span class="pill-content">
                <a href="http://www.imdb.com/title/tt0816692" class="pillLink">Very Long Sample Text 4: A new Hope Extended Cut<span class="date">(2014)</span></a>&nbsp;

    </span>
            </div>



.pill-content{
    display: inline-block;
    vertical-align: middle;
    max-width: calc(100% - 92px);
    margin-left: 20px;
}

.pillLink {
    display: inline-block;
    font-size:24px;
}
.date{
    font-size:14px;
    color: initial;
    margin-left: 8px;
}
.pill > .cover {
    outline: 2px solid #FFF;
    width: 68px;
    max-height: 100px;
}

Upvotes: 1

Align text (2 lines) with thumbnail

Answers (3)

Related Questions