CODEWITHSUNDEEP
htmlcssbbcode
Scopo
Scopo

Reputation: 301

Wrap text around bottom left div?

I realise this question has been answered before. However, none of the solutions worked for me. Or uh, I'm not doing them right, whichever.

Anyway. I need to wrap text in a container around a div in the bottom left corner. I can't margin-top/top the BL div since it doesn't wrap, and I can't absolute position it.

I need it to look like this:

------------------
|text text text t|
|ext text text te|
|xt text text tex|
|---|t text text |
|   |text text te|
-----------------

I'm coding this on a site that uses BBCode, so I'm a tad limited in what I can do HTML-wise, and I cannot use javascript/jquery.

Fiddle here, I've also attached the code below.

.bg {
  width: 310px;
  height: 200px;
  background-color: #FCF2FF;
  position: relative;
  font-family: tahoma, arial;
  font-size: 11px;
  color: #772D99;
}

.title {
  position: absolute;
  left: 10px;
  top: 5px;
  text-align: left;
  font-weight: bold;
  font-size: 23px;
  font-variant: small-caps;
}

.desc {
  position: relative;
  top: 35px;
  left: 0px;
  width: 115px;
  height: 70px;
  border: 1px dotted #B07ACC;
  background-color: #FCF2FF;
  padding: 3px;
  padding-top: 70px;
  box-sizing: border-box;
}

.pkmn {
  position: relative;
  float: left;
  padding: 3px;
  width: 32px;
  height: 32px;
  border: 1px dotted #B07ACC;
  border-radius: 100%;
  background-color: #FCF2FF;
  overflow: hidden;
}
<div class="bg">
  <div class="title">Title Here</div>
  <div class="desc">
    <div class="pkmn">
      <img src="https://pfq-static.com/img/pkmn/q/4/r/8.png/t=1482399842" />
    </div>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text
  </div>
</div>

Upvotes: 1

Views: 1221

Answers (2)

James Douglas
James Douglas

Reputation: 3446

Just add float: left;position: relative; to your element and add a spacer element like seen in the code below.

.bg {
  width: 310px;
  height: 200px;
  background-color: #FCF2FF;
  position: relative;
  font-family: tahoma, arial;
  font-size: 11px;
  color: #772D99;
}
.title {
  position: absolute;
  left: 10px;
  top: 5px;
  text-align: left;
  font-weight: bold;
  font-size: 23px;
  font-variant: small-caps;
}
.desc {
  position: relative;
  top: 35px;
  left: 0px;
  width: 115px;
  height: 165px;
  border: 1px dotted #B07ACC;
  background-color: #FCF2FF;
  padding: 3px;
  box-sizing: border-box;
}
.pkmn {
  margin-left: -3px;
  margin-right: 3px;
  padding: 3px;
  width: 32px;
  height: 32px;
  border: 1px dotted #B07ACC;
  border-radius: 100%;
  background-color: #FCF2FF;
}
<div class="bg">
  <div class="title">Title Here</div>
  <div class="desc">
    <!-- I used CSS, but inline will serve well here -->
    <div style="float: left; width: 0px; height: 120px"></div>
    <div style="float: left; clear: left">
      <img src="https://pfq-static.com/img/pkmn/q/4/r/8.png/t=1482399842" class="pkmn"/>
    </div>
    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
  </div>
</div>

Upvotes: 2

LKG
LKG

Reputation: 4192

Remove height to take required height of content and remove padding-top to stay content in div and add display:inline-block to take required height of div.

If i something missed in css or html so take a look in fiddle code

Working fiddle

Udate css part 

.desc {
  position: relative;
  top: 35px;
  left: 0px;
  width: 115px;
  /* height: 70px; */
  border: 1px dotted #B07ACC;
  display:inline-block;
  background-color: #FCF2FF;
  padding: 3px;
  /* padding-top: 70px; */
  box-sizing: border-box;
}

Update HTML part

<div class="bg">
  <div class="title">Title Here</div>
  <div class="desc">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text
    <div class="pkmn">
      <img src="https://pfq-static.com/img/pkmn/q/4/r/8.png/t=1482399842" />
    </div>
  </div>
</div>


.bg {
  width: 310px;
  height: 200px;
  background-color: #FCF2FF;
  position: relative;
  font-family: tahoma, arial;
  font-size: 11px;
  color: #772D99;
}

.title {
  position: absolute;
  left: 10px;
  top: 5px;
  text-align: left;
  font-weight: bold;
  font-size: 23px;
  font-variant: small-caps;
}

.desc {
  position: relative;
  top: 35px;
  left: 0px;
  width: 115px;
  /* height: 70px; */
  border: 1px dotted #B07ACC;
  display:inline-block;
  background-color: #FCF2FF;
  padding: 3px;
  /* padding-top: 70px; */
  box-sizing: border-box;
}

.pkmn {
  position: relative;
  float: left;
  padding: 3px;
  width: 32px;
  height: 32px;
  border: 1px dotted #B07ACC;
  border-radius: 100%;
  background-color: #FCF2FF;
  overflow: hidden;
}
<div class="bg">
  <div class="title">Title Here</div>
  <div class="desc">
    text text text text text text text text text text text text text text text text text text text text text text text text text text text
    <div class="pkmn">
      <img src="https://pfq-static.com/img/pkmn/q/4/r/8.png/t=1482399842" />
    </div>
  </div>
</div>

Upvotes: 0

Related Questions