CODEWITHSUNDEEP
htmlcss
funnyfish
funnyfish

Reputation: 143

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>

Upvotes: 1

Views: 474

Answers (3)

Dalin Huang
Dalin Huang

Reputation: 11342

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>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53674

I would use flexbox and just nest the left menu in an element so it doesn't "stretch" the height and will be auto height based on content. I would also make the white box container a flex layout, too.

@charset "utf-8";
.container {
  border: solid;
  margin-left: 10px;
  overflow: auto;
  flex: 1 0 0;
  max-width: 550px;
  background-color: green;
  display: flex;
  flex-wrap: wrap;
}

.menu {
  border: dashed;
  border-color: blue;
  text-align: left;
  padding: 10px;
}

.box {
  margin: 20px;
  padding: 10px;
  width: 70px;
  height: 50px;
  border: solid;
  background-color: white;
}

.flex {
  display: flex;
}
<div class="flex">
  <aside>
    <div class="menu">Menu
      <ul>
        <li>Link A</li>
        <li>Link B</li>
      </ul>
    </div>
  </aside>
  <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>
</div>

Upvotes: 1

sol
sol

Reputation: 22919

If you are open to flexbox you could add a wrapping container and remove floating properties...

@charset "utf-8";
.wrapper {
  display: flex;
}

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

.menu {
  display: inline-block;
  border: dashed;
  border-color: blue;
  text-align: left;
  padding: 10px;
  flex: 1 0 100px;
  height: 90px;
  /* control the height of the menu here */
}

.box {
  display: inline-block;
  float: left;
  margin: 20px;
  padding: 10px;
  width: 70px;
  height: 50px;
  border: solid;
  background-color: white;
}
<div class="wrapper">
  <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>
</div>

Upvotes: 1

Related Questions