funnyfish funnyfish - 1 year ago 52
CSS Question

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

I have two divs on a page. The second one contains other divs. I want the second div to reshape when the screen narrows. But instead the whole container moves below the previous div. This fiddle should clarify:
https://jsfiddle.net/gf6zq3pk/7/. I want the green div to stay in position as the screen width is changed and the white boxes to float accordingly.



.container {
display: inline-block;
float: left;
border: solid;
margin-left: 10px;
overflow: auto;
max-width: 550px;
width: auto;
background-color: green;
}

.menu {
display: inline-block;
float: left;
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>




Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download