CODEWITHSUNDEEP
htmlcssflexbox
webta.st.ic
webta.st.ic

Reputation: 5169

Float text under a div

Hi I've got this code:

.wrapper {
  width: 100%;
  border: 3px solid black;
  display: flex;
}
.myText {
  width: 50%;
  background-color: yellow;
}
.box {
  width: 50%;
  height: 50px;
  background-color: orange;
}
<div class="wrapper">
  <div class="myText">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="box"></div>
</div>

My goal is, that the text within the yellow box floats under the orange one (if it is too long like in the example. Something like this:

enter image description here

I have no ideas how to do this and I didn't found any solutions on the internet. Any ideas? Thanks

Upvotes: 0

Views: 67

Answers (3)

Harish Kommuri
Harish Kommuri

Reputation: 2854

Try placing .box at top and float: right;.

.wrapper {
  border: 3px solid black;
  text-align: justify;
}
.myText {
  background-color: yellow;
}
.box {
  width: 50%;
  height: 50px;
  background-color: orange;
  float: right;
}
<div class="wrapper">
  <div class="box"></div>
  <div class="myText">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>

Upvotes: 2

GeekAb
GeekAb

Reputation: 505

Simplest solution I can think of is you put orange box inside yellow one and before writing any text. Something like this 

<div class="myText">
  <div class="box"></div>
     Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>

You also have to make change in your CSS. Add this one property with box class.

float:right;

Upvotes: 0

Jainam
Jainam

Reputation: 2660

.wrapper {
  width: 100%;
  border: 3px solid black;
  display: flex;
}
.myText {
  background-color: yellow;
  text-align: justify;
}
.box {
  background-color: orange;
  float: right;
  height: 60px;
  width: 50%;
}
<div class="wrapper">
  <div class="myText">
    <div class="box"></div>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  
</div>

Upvotes: 1

Related Questions