How do you resize a container between two others?


Tags: jquery,css

Problem :

In my app I have three <div> containers: a left, middle and right one. They're all floating left and it all works great except when the window is resized or there is a smaller available width within a browser.

The left and right containers need to remain the same (width 117px) while the middle container needs to be the one changing with different screen resolutions or a change in window size. The problem is that the browser will move the left or right containers out of the way - above or below the middle container - before resizing the middle container as the window becomes smaller. How can I force the page to not move the left and right containers and resize the middle container? Inline CSS is just for tweaking for now. Is there a simple CSS trick to make this happen or am I going to need to use JS/jQuery to make this happen?

        <div style="width:100%;">
          <div style="background:url('image.png') no-repeat;width:117px;height:36px;float:left;">
          </div>
          <div style="border:1px solid white;height:36px;width:100%;min-width:490px;max-width:1364px;float:left;">
          </div>
          <div style="background:url('image.png') no-repeat;width:117px;height:36px;float:left;">
          </div>
          <br style="clear:both;">
        </div>


Solution :

One solution is to use tables: http://jsfiddle.net/e5gfbsu0/.

HTML:

<div class = "container">
    <div class = "left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, nulla sit amet placerat molestie, quam urna mollis eros, eget pellentesque tellus nisi sit amet ligula.
    </div>
    <div class = "middle">
        MIDDLE
    </div>
    <div class = "right">
        Mauris dapibus bibendum luctus. Nulla finibus nulla eu felis dignissim blandit.
    </div>
</div>

CSS:

.container {
    display: table;
    width: 100%;
    outline: 1px solid gray;
}

.container > .left,
.container > .right {
    display: table-cell;
    width: 117px;
    border: 1px dotted gray;
}

.container > .middle {
    display: table-cell;
    border: 1px dotted red;
}

Another solution is to use flexbox: http://jsfiddle.net/xrqyxnzg/.

CSS:

.container {
    display: flex;
}

.container > .left,
.container > .right {
    flex: 0 0 117px;
    border: 1px dotted gray;
}

.container > .middle {
    flex: 1 1 auto;
    border: 1px dotted red;
}

And, a third (less optimal) solution that treats each box as inline-block: http://jsfiddle.net/f64vj6dm/.

HTML: (changed to eliminate white spaces [i.e., returns])

<div class = "container"><div class = "left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, nulla sit amet placerat molestie, quam urna mollis eros, eget pellentesque tellus nisi sit amet ligula.
    </div><div class = "middle">
        MIDDLE
    </div><div class = "right">
        Mauris dapibus bibendum luctus. Nulla finibus nulla eu felis dignissim blandit.
    </div>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;    
}

.container {
    white-space: nowrap;
}

.container > .left,
.container > .right {
    border: 1px dotted gray;
    width: 117px;
    display: inline-block;
    white-space: normal;
    vertical-align: top;
}

.container > .middle {
    display: inline-block;
    vertical-align: top;
    border: 1px solid red;
    width: calc(100% - 117px * 2);
}

    CSS Howto..

    How to style select crossbrowser [duplicate]

    Home and Contact Us tab's hover effects in my dropdown navigation menu not how I want it

    How can I position an element in the middle of the window while using position: absolute?

    How do I style forms using CSS

    HTML and CSS: How to play video on website [closed]

    How can I select complete
  • element in navigation bar when hovered or selected?
  • How to remove href attributes from a tag and remove css associated to it in iframe using jquery

    How to center text in my div

    How to get logo to front layer

    How to generate code for cross browser compatibility css in sublime or atom

    How to align image to the right?

    How to create a single space in css between a sentence and a photo on my wordpress site?

    how do i change the css property for only one row with a custom class with out removing the styles from the other rows?

    How to squash a div vertically and keep element below 100% on screen

    in slick slideshow, just want center slide to be active

    How to use Aural CSS?

    how to fit text inside a HTML div

    How to create vertical text using only CSS?

    Dojo: how to find css definition for digit.form.filteringselect, especially the drop down list?

    How to change where a CSS transition starts from?

    HTML/CSS/JS: How to force browser to save password from a non-'password' type input?

    How to make each element to be fully independend with CSS?

    How i can optimize Performance in asp.NET MVC based web application

    How to prevent HTML elements from being pushed down the page

    how to change css of the image link when clicked?

    Foundation 6: how to handle images that has an vertical overflow within one row?

    How find all elements with a specific css property in a div and add a class to div

    How to create border bottom with 2 different color?

    JavaScript, AngularJS: How do I know if element is larger than its container?

    Django-Bower + Foundation 5 + SASS, How to configure?