CODEWITHSUNDEEP
htmlcss
KR8T3
KR8T3

Reputation: 7

Responsively change size of div

I am having issues figuring out how to responsively change the size of a div based on other div’s around the one I am working with. I have buttons on the left of the page as well as the right and some text in the middle that can range from 0 characters to 140 characters.

What I am trying to do is make it so that as the actual page size changes, the buttons on the outside move inward and the amount of text visible in the middle div will shrink down. Originally, I had looked into setting the width with a %, however this doesn’t give me the result I want. Instead of allowing it to take up however much room there is, it will always be forced to stay smaller than that max. (So, if I set the max width to 40% and I open the page in a widescreen, to allow the text to fill the entire middle area, the max width I would actually want would be 50%. And the problem goes in reverse as well. Set it to max of 50% but the page is smaller, so I actually only want it to take up 40% of the page)

I need something to change the size of the item in the middle while keeping the outer items on the outside of the page until the item in the middle is a certain width (ex. If there is text in the middle, don’t allow it to take up less than 15% of the page).

.leftSide {
  float: left;
}

.middle {
  display: inline-block;
  padding-left: 5px;
  min-width: 15%;
  background: #ccc;
}

.rightSide {
  float: right;
}
<div class="header">

  <div class="leftSide">
    <button>Save</button>
    <button>Next</button>
    <button>Back</button>
  </div>

  <div class="middle">Some text here - min char 0, max 140</div>

  <!--Comment out the class: middle above and uncomment the class: middle below to see what I mean with the length being a problem when resizing the page-->

  <!--<div class = "middle">Text could also be really long like this one is. The cow jumped over the moon bla bla bla.... </div> -->

  <div class="rightSide">
    <button>Cancel</button>
    <button>Other Button</button>
  </div>

</div>

I also put my code into the following jsfiddle: https://jsfiddle.net/KR8T3/8vywe1zr/14/ (For simplicity, for the div I am working with in the middle, I just used plain text in the example. In my program I pull in the info from elsewhere that allows the text to be anywhere from a char length of 0 to 140)

Upvotes: 0

Views: 70

Answers (1)

Filip Albert
Filip Albert

Reputation: 163

If I understand well you should use css flex and get rid of float. In the code below I used display: flex; for header and for button items I used flex-shrink: 0;, which will not break button into lines and flex-shrink: 1; for middle text, so it can shrink to min-content when resized. I also put flex-grow: 1; to the last item so it can fill the space and position it to the right with text-align: right;.

Is that what you are looking for?

.header {
   display: flex;
}

.leftSide {
  flex-shrink: 0;
}

.middle {
  display: inline-block;
  padding-left: 5px;
  min-width: 15%;
  background: #ccc;
  flex-shrink: 1;
}

.rightSide {
  flex-shrink: 0;
  flex-grow: 1;
  text-align: right;
}
<div class="header">

  <div class="leftSide">
    <button>Save</button>
    <button>Next</button>
    <button>Back</button>
  </div>

  <div class="middle">Some text here - min char 0, max 140</div>

  <div class="rightSide">
    <button>Cancel</button>
    <button>Other Button</button>
  </div>

</div>

Upvotes: 1

Related Questions