How to Make a Div to Wrap Two Float Divs Inside

how to make a div to wrap two float divs inside?

It's a common problem when you have two floats inside a block. The best way of fixing it is using clear:both after the second div.

<div style="display: block; clear: both;"></div>

It should force the container to be the correct height.

How to float left two divs such that the second div, which contains other divs, resizes correctly

If you don't want to use flexbox yet, try this.
Just use position: absolute; instead of float to both containers.

@charset "utf-8";.container {  display: inline-block;  position: absolute;  border: solid;  margin: 0 10px 10px 125px;  overflow: auto;  max-width: 550px;  width: auto;  background-color: green;}
.menu {  display: inline-block;  position: absolute;  border: dashed;  border-color: blue;  text-align: left;  padding: 10px;}
.box {  display: inline-block;  float: left;  margin: 20px;  padding: 10px;  width: 70px;  height: 50px;  border: solid;  background-color: white;}

<div class="menu">  Menu  <ul>    <li>Link A</li>    <li>Link B</li>  </ul></div><div class="container">  <div class="box"> Text1 </div>  <div class="box"> Text2 </div>  <div class="box"> Text3 </div>  <div class="box"> Text4 </div>  <div class="box"> Text5 </div>  <div class="box"> Text6 </div>  <div class="box"> Text7 </div>  <div class="box"> Text8 </div></div>

two divs lying horizontally centered in wrapping div

#navbar5 {
  width: auto;
  text-align: center;
  float: left;
}

.simple_text {
  display: flex;
  justify-content: center;
}

#two,
#navbar5 button:last-of-type {
  margin: 0 0 0 10px;
}

<div id="navbar5">
  <button> abc </button>
  <button> def </button>
  <div class="simple_text">
    <div id="one"> xxxxxxx </div>
    <div id="two"> yyyyyyy </div>
  </div>
</div>

CSS - Two floating divs in same line, one with wrapping text

Looks like you need only one float here:

div{border: 1px solid black}
.left{ overflow: hidden; }
.right{float: right}

Example http://jsfiddle.net/KmPjL/

How do I make two divs in the same row float in different directions?

For the text to be right-aligned, in you configuration positioning it absolutely based on <li> is the easiest way:

.resultDiv {
    text-align: right;
    position: absolute;
    right: 0;
}

For that to work, you have to add position: relative; to your .resultsListItems.

I changed your example a bit with regard to styling to showcase the elements better.

.answerDiv,.resultDiv,.histogramBar {  display: inline-block;  font-size: 14px;  vertical-align: top;}.answerDiv {  margin-right: 10px;  width: 100px;}.histogramBar {  height: 6px;  width: 100px;  background-color: red;  margin-top: 9px;  border-radius: 5px;  transition: all 1s;}.histogramBar:hover {  width: 150px;}/*text*/
h2 {  font-size: 40px;  color: black;}/*alignment*/
.results {  width: 400px;  height: 400px;  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  margin: auto;  font-size: 0;}.resultsListItem {  list-style-type: none;  position: relative;}.resultsListItem:nth-of-type(even) {  background-color: #f8f8ff;}.results ul {  margin: 0;  padding: 0;}.resultDiv {  text-align: right;  position: absolute;  right: 0;}

<div class="results">  <h2>Some data</h2>  <ul style="">    <li class="resultsListItem">      <div class="answerDiv">text</div>      <div class="histogramBar"></div>      <div class="resultDiv">7</div>    </li>    <li class="resultsListItem">      <div class="answerDiv">text that will wrap to a new line</div>      <div class="histogramBar"></div>      <div class="resultDiv">821</div>    </li>    <li class="resultsListItem">      <div class="answerDiv">text</div>      <div class="histogramBar"></div>      <div class="resultDiv">4</div>    </li>    <li class="resultsListItem">      <div class="answerDiv">text</div>      <div class="histogramBar"></div>      <div class="resultDiv">14</div>    </li>  </ul></div>

How to keep two dynamic divs on same line and force to word wrap on right

Any reason you can't use a float as nature intended?

Fiddle demo

.images {    float:left;    border:1px solid black;    height: 200px;}.text {    border:1px solid black;    overflow: hidden;}

<div class='wrapper'>  <div class='text'>    <div class='images'>images</div>
    long text long text long text long text long text long text long text long text long text long text</div></div>

Get 2 divs to stretch out to fill the width of the wrapping div at all times

#wrap {    border: 1px solid red;       height: 200px;    width: 100%;    }
#gr1 {   border: 1px solid blue;   float: left;     }
#gr2 {   border: 1px solid blue;     float: left;}
#gr1, #gr2 {  width: 50%;  box-sizing: border-box}

<div id="wrap">    <div id="gr1">Group 1  </div>
  <div id="gr2">Group 2  </div></div>

---

Related Topics