move fixed-margin div below left-float div when screen size is small

Question

I am using the recommended approach from this question https://stackoverflow.com/a/468080/2981429 and have two divs:

#left-pane {
  float: "left";
  width: "300px";
}

#right-pane {
  margin-left: "300px";
}

the left pane takes up a fixed 300px width and the right pane always takes up 100% of the remaining space.

I want to add a "minimum width" to the right pane. When it gets below a width of around 300px I want to move it below the left pane.

When I try actually adding min_width: 300px to the right pane, it just extend invisibly past the boundaries of the page - it doesn't seem to be able to get below the floated left pane.

Codepen

For your layout i think it's better to use flexbox. But if i understand do you want to get the 2 divs on column when you use a small device? — Sfili_81, Jan 23 '20 at 07:42
@Sfili_81 yes, correct they would be on the same column. I added a codepen to the question by the way. Thanks for your advice to use flexbox. I have not done it before. — max pleaner, Jan 23 '20 at 07:45

score 2 · Accepted Answer · answered Jan 23 '20 at 07:51

2

You can use flexbox for your layout. You can find a good point to start on MDN.

When you use a small device, you can use a media-query to get the divs on column.

For example:

@media (max-width: 600px) {
  .container{
    flex-direction:column;
  }
  #left,#right{
    flex: 0 1 100%;/* set the width to 100% for the 2 columns */
  }
}

.container{
  display:flex;
}
#left {
  flex:0 1 300px;
  height: 300px;
  background-color: blue;
}

#right {
  flex:1 1 auto;
  height: 300px;
  background-color: darkred;
}

<div class="container">
  <div id='left'></div>
  <div id='right'></div>
</div>

answered Jan 23 '20 at 07:51

Sfili_81

2,377
8
27
36

Thank you, this is mostly working. Is there any way to give the left element a fixed width and dynamic height? With this code, both its height and width seem to be fixed to 300px. I can lower the flex value, say to `0 1 150px`, but then the width is reduced as well. – max pleaner Jan 23 '20 at 08:09
Well, I just ended up using `width` and `min-width` instead of `flex` onto the left element, as shown in Matan's answer. – max pleaner Jan 23 '20 at 08:11
you can set height auto for both columns. Only the left column has a fixed width, the right column take the rest of the space. – Sfili_81 Jan 23 '20 at 08:12
I seem to have lost my ability to scroll on the overflow-y, but i am tired, will have to look at this more tomorrow. – max pleaner Jan 23 '20 at 08:16
1

Turns out the problem with overflow-y was not really related. Thanks. – max pleaner Jan 24 '20 at 04:24

score 2 · Answer 2 · answered Jan 23 '20 at 07:54

that is not a float job. you need flex for this instance.

.container {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
 }

#left-pane {
  width: 300px;
  min-width: 300px;
}

@media only screen and (max-width: 300px) {
  .container {
    flex-flow: column;
  }
}

using flex gives you a lot of new layout and responsive options, you can read more here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Chami M · Answer 3 · 2020-01-23T07:56:52.023

2

.parent {
  display: flex;
}
#left {
  float: left;
  width: 300px;
  height: 300px;
  background-color: blue;
}

#right {
  height: 300px;
  background-color: darkred;
  width: calc(100% - 300px);
}

@media (max-width: 600px) {
  .parent {
    flex-direction: column;
  }
  #left,
  #right {
    width: 100%;
  }
}

<div class="parent">
  <div id='left'></div>
  <div id='right'></div>
</div>

edited Jan 23 '20 at 07:56

answered Jan 23 '20 at 07:54

Chami M

146
1
7

2

my opinion, it's not necessary to use calc for width. using flex: 1 1 auto you delegate to flex to calcualte the remaining space – Sfili_81 Jan 23 '20 at 07:56

move fixed-margin div below left-float div when screen size is small

Codepen

3 Answers3