one div to wrap once it butts up against another div and not stack on it

user_8845372 0
Viewed 48

Is there a way I can make the blue div wrap text once it butts up against the yellow div instead of stacking on top of the yellow one? Is there a way I can use overflow or wordwrap? that will make this work?

blue div to wrap once it butts up against yellow div

.container {
  width:100%;
  border: px solid #d3d3d3;
}

.container div {}

.wrap1 {
  display: table;
 border: 1px solid green;
  width: 100%;
}

.wrap2 {
  display: table;
  border: 1px solid red;
  width: 100%;
}

.title {border: 1px solid blue;
  display: table;
  float: left;
}

.container .learn {
  float: right;border: 1px solid yellow;
  cursor: pointer;
  display: table;
}

.container .content {
  display: table;
  display: none;
  padding: 5px;
}
<div class="container">
  <div class="wrap1">
    <div class="title">How do we shop our carriers to find you the best price when we have so many?</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->
  <div class="wrap2">
    <div class="content">
     <p> We use what is called a Comparative Rater. We simply input your information
which then gets sent out to all the carriers and within a minute they return their
prices. From there we choose the best one for you similar to shopping online for
flights and hotels.</p>
    </div>
  </div>
  <!--holds the content below the wrap one div-->
</div>
<!--container-->

css html
5 Answers

You could put display: flex; onto the wrap1 class instead of display table and I believe this will get the effect you are wanting.

user_51357240

Use flexbox!

Add display: flex; to your containers. This will wrap your text once it reaches the other div. I've included a snippet example that should work for you.

.container {
  width:100%;
  border: px solid #d3d3d3;
}

.container div {}

.wrap1 {
  display: flex;
  justify-content: space-between;
 border: 1px solid green;
  width: 100%;
}

.wrap2 {
  display: table;
  border: 1px solid red;
  width: 100%;
}

.title {border: 1px solid blue;
  display: table;
  float: left;
}

.container .learn {
  float: right;border: 1px solid yellow;
  cursor: pointer;
  display: table;
}

.container .content {
  display: table;
  display: none;
  padding: 5px;
}
<div class="container">
  <div class="wrap1">
    <div class="title">How do we shop our carriers to find you the best price when we have so many?</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->
  <div class="wrap2">
    <div class="content">
     <p> We use what is called a Comparative Rater. We simply input your information
which then gets sent out to all the carriers and within a minute they return their
prices. From there we choose the best one for you similar to shopping online for
flights and hotels.</p>
    </div>
  </div>
  <!--holds the content below the wrap one div-->
</div>
<!--container-->

user_74307000

Set a percentage width on the div and then use word-wrap: break-word;

.container {
  width:100%;
  border: px solid #d3d3d3;
}

.container div {}

.wrap1 {
  display: table;
 border: 1px solid green;
  width: 100%;
}

.wrap2 {
  display: table;
  border: 1px solid red;
  width: 100%;
}

.title {border: 1px solid blue;
  display: table;
  float: left;
  word-wrap: break-word;
  width: 50%;
}

.container .learn {
  float: right;border: 1px solid yellow;
  cursor: pointer;
  display: table;
}

.container .content {
  display: table;
  display: none;
  padding: 5px;
}
<div class="container">
  <div class="wrap1">
    <div class="title">How do we shop our carriers to find yfkasjldkfjl;kjsdfl;kjsdfasdfasdfou the best price when we have so many?</div>
    <div class="learn">Learn More!</div>
  </div>
  <!--makes the content expand below this div-->
  <div class="wrap2">
    <div class="content">
     <p> We use what is called a Comparative Rater. We simply input your information
which then gets sent out to all the carriers and within a minute they return their
prices. From there we choose the best one for you similar to shopping online for
flights and hotels.</p>
    </div>
  </div>
  <!--holds the content below the wrap one div-->
</div>
<!--container-->

user_70151180

Flexbox can do that.

.container {
  width: 60%; /* for demo */
  margin:auto;
  border: 1px solid #d3d3d3;
}

.container div {}

.wrap1 {
  display: flex;
  border: 1px solid green;
}

.title {
  flex: 1;
  border: 1px solid blue
}

.container .learn {
  border: 1px solid yellow;
  cursor: pointer;
}
<div class="container">
  <div class="wrap1">
    <div class="title">How do we shop our carriers to find you the best price when we have so many?</div>
    <div class="learn">Learn More!</div>
  </div>

</div>
<!--container-->

user_28020400

If you want a really clean solution, I'd recommend using flex-box! Elements defined within the flex boxed container will have to share the given width amongst themselves based on their needs (how much content is within them).

I like adding a min-width to the small element so it doesn't get squashed.

.container {
  width:100%;
  border: 5px solid #d3d3d3;
}

.wrap1 {
  border: 1px solid green;
  width: 100%;
  display: flex;
  flex-direction: row;
}

.wrap2 {
  border: 1px solid red;
  width: 100%;
}

.title {
  border: 1px solid blue;
}

.learn {
  min-width: 25%;
  border: 1px solid yellow;
  cursor: pointer;
}

I would suggest staying away from floats as much as possible. It takes the element out of it's traditional flow and can cause other problems when styling.Another solution is to use display: inline-block - if child elements don't take up the full width of their parent's container, they will share the space. A bit wonky with 75%/24%, which is why I prefer flex-box.

.container {
  width:100%;
  border: 5px solid #d3d3d3;
  box-sizing: content-block;
}

.wrap1 {
  border: 1px solid green;
  width: 100%;
}

.wrap2 {
  border: 1px solid red;
  width: 100%;
}

.title {
  border: 1px solid blue;
  max-width: 75%;
  display: inline-block;
}

.learn {
  display: inline-block;
  width: 24%;
  border: 1px solid yellow;
  cursor: pointer;
}
user_61010740
Related