jquery – Div’s Auto Dimensionaveís

Question:

I have a question, I'm creating an html page where I'll have 3 columns , but the user will resize it the way they want, however automatically the divs will have to adjust themselves !

I'm using the resizable property of jqueryUI .

I would like to know if you can help me

#container {
	width:100%;
	text-align:center;
}

#left {
	float:left;
	width:32%;
	height: 20px;
	background: #000;
}

#center {
	display: inline-block;
	margin:0 auto;
	width:32%;
	height: 20px;
	background: #00ff00;
}

#right {
	float:right;
	width:32%;
	height: 20px;
	background: #7b8787;
}

<div id="container">
  <div id="left"></div>
  <div id="center"></div>
  <div id="right"></div>
</div>

When stretching any of the divs to any side they should automatically adjust.

Answer:

You can use flexbox properties for this, just turn your container into a flex container, and then adjust its child elements with the flex property, which makes "content automagically fill the remaining space in the container"

Example from your code:

#container {
    width:100%;
  display: flex;
}

#left {
    width:32%;
    height: 20px;
    background: #000;
  flex: 1;
}

#center {
    width:32%;
    height: 20px;
    background: #00ff00;
  flex: 1;
}

#right {
    width:32%;
    height: 20px;
    background: #7b8787;
  flex: 1;
}

To learn more about flexbox, take a look at this project:

https://github.com/afonsopacifer/awesome-flexbox

🙂