CODEWITHSUNDEEP
htmlcssreactjs
NewProgrammer
NewProgrammer

Reputation: 164

Text starts at bottom of div

I'm trying to have a thumbnail on one side and then a title on another, but what ends up happening is the text just overflows and I can't just get to stay inside the div it's in.

.suggestedvids {
  float: right;
  width: 27.5vw;
  margin-top: 2.5%;
  margin-right: 2.5vw;
}

.onevid {
  height: 7vw;
  width: 100%;
  word-wrap: break-word;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumbnail {
  height: 100%;
  width: auto;
}

.vidInfo {
  height: 100%;
}
<div className="suggestedvids">
  <div className="onevid">
    <img className="thumbnail" src="https://i.ytimg.com/vi/NO2DaxhoWHk/mqdefault.jpg" />
    <a className="vidInfo">
      <p1>Build Real Web App with React #01</p1>
      <br></br>
      <p2>Rem Zolotykh</p2>
    </a>
  </div>
</div>

Upvotes: 0

Views: 94

Answers (4)

Aryan Twanju
Aryan Twanju

Reputation: 2516

You still have lots to learn about html and css. There is no attribute like className in html, it should be class and no element like <p1> or <p2>. Here is a working code updated from your code.

.suggestedvids {
  margin-top: 2.5%;
}

.onevid {
  width: 100%;
  word-wrap: break-word;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
}

.thumbnail {
  height: 100%;
  width: auto;
}

.vidInfo {
  height: 100%;
  display: block;
}
<div class="suggestedvids">
  <div class="onevid">
    <img class="thumbnail" src="https://i.ytimg.com/vi/NO2DaxhoWHk/mqdefault.jpg" />
    <a class="vidInfo">
      <p>Build Real Web App with React #01</p>
      <br><br>
      <p>Rem Zolotykh</p>
    </a>
  </div>
</div>

Upvotes: 0

Vic Segers
Vic Segers

Reputation: 197

If I understand your question correctly, then this simple code should work.

Edit: It looks like it doesn't work in the code snippet, because the window is too small. If you expand it, it looks just fine.

img {
  float: left;
}

figcaption {
  float: left;
}
<figure>
  <img src="https://i.ytimg.com/vi/NO2DaxhoWHk/mqdefault.jpg" />
  <figcaption>
    <p>Build Real Web App with react #01</p>
    <p>Rem Zolotykh</p>
  </figcaption>
</figure>

Upvotes: -1

Jagjeet Singh
Jagjeet Singh

Reputation: 1572

You can do like this :

* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
.col-1 {
    float: left;
    width: 30%;
}
.col-2 {
    float: left;
    width: 70%;
    padding: 0 15px;
}
p {
    margin: 0;
    margin-bottom: 10px;
}
.thumbnail {
    width: 100%;
}
<div class="row">
  <div class="col-1">
    <img class="thumbnail" src="https://i.ytimg.com/vi/NO2DaxhoWHk/mqdefault.jpg" />
  </div>
  <div class="col-2">
    <p>Build Real Web App with React #01</p>
    <p>Rem Zolotykh</p>
  </div>
</div>

Upvotes: 2

LahiruTM
LahiruTM

Reputation: 648

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
    box-sizing: border-box;
}

.column1 {
    float: left;
    width: 30%;
    padding: 10px;
    min-height: 7vw;
}
.column2 {
    float: left;
    width: 70%;
    padding: 10px;
    min-height: 7vw;
}
.thumbnail {
    width: 100%;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
</style>
</head>
<body>
<h2>Two Equal Columns</h2>
<div class="row">
    <div class="column1" style="background-color:#aaa;">
        <img class="thumbnail" src="https://i.ytimg.com/vi/NO2DaxhoWHk/mqdefault.jpg" />
    </div>
    <div class="column2" style="background-color:#bbb;">
        <p1>Build Real Web App with React #01</p1>
        <br></br>
        <p2>Rem Zolotykh</p2>
    </div>
</div>

</body>
</html>

Upvotes: 0

Related Questions