fractal5 fractal5 - 2 months ago 6
CSS Question

Dynamically resizing and placing div at the end (right/bottom) of container

I have this setup

HTML:



body, html {
margin: 0;
height: 100%;
}

.cont{
border:solid 1px red;
display:inline-block;
}

.left {
float: left;
width: 300px;
height: 30px;
border:solid 1px #000;
}

.big{
width:600px;
}

.right {
border:solid 1px #000;
min-width:200px;
overflow: auto;
height: 30px;
padding-left:5px;
padding-right:10px;
padding-top:3px;
background:green
}

<div class='cont'>
<div class='left'>1</div>
<div class='left'>2</div>
<div class='left big'>3</div>
<div class='left big'>4</div>
<div class='right'>Dynamic Div</div>
</div>





Codepen link for those who prefer that

I need the 'right' div to be placed on the right of div 4. What happens is, if there is leftover space of >=200px after placing the numbered divs, the input text div gets squeezed in there. I don't want that.

Essentially the 'right' div always needs to be on the right of the last numbered div, and filling in the remaining space on the right. If the remaining space is less than 200px, the div should move to the next row.

Each of the numbered divs will have varied widths, although that probably doesn't matter here.

Can I achieve this without jquery?

Thanks.

EDIT: I was able to get this done using flexbox



.cont{
border:solid 1px red;
display:flex;
flex-wrap: wrap;
}

.right {
flex-grow:1;
border:solid 1px #000;
.....
}




pol pol
Answer

Using flex boxes it is possible to get this done.

View it on jsfiddle.

Snippet:

body, html {
  margin: 0;
  height: 100%;
}

.cont {
  border: solid 1px red;
  /*display: inline-block;*/
  display: flex; /* added */
  flex-wrap: wrap; /* added */
  
}

.left {
  border: solid 1px #000;
  float: left;
  height: 30px;
  /*width: 300px;*/
  min-width: 300px; /* added */
  max-width: 300px; /* added */
  box-sizing: border-box; /* added */
}

.big {
  /*width: 600px;*/
  max-width: 600px; /* added */
  min-width: 600px; /* added */
}

.right {
  border: solid 1px #000;
  min-width: 200px;
  overflow: auto;
  height: 30px;
  padding-left: 5px;
  padding-right: 10px;
  padding-top: 3px;
  background: green;
  flex: 1; /* added */
}
<div class='cont'>
  <div class='left'>1</div>
  <div class='left'>2</div>
  <div class='left big'>3</div>
  <div class='left big'>4</div>
  <div class='right'>Dynamic Div</div>
</div>

You can learn more about flexboxes from these links:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
http://www.w3schools.com/css/css3_flexbox.asp

Comments