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 handle CSS code in my Android email app?

    How make input element take up available space next to a fixed width element?

    How to make background image on hover have a transition effect without default background image?

    How to define css selector class prefix with SASS

    How to align two svg masked images on the same line

    how to stop jquery change css of all the divs onhover of a single div

    How can I place multiple spans in the same line?

    How to make a correct mosaic with CSS?

    How to display .toggle or .Animate to all connected browser sessions using Meteor

    CSS check box, how to make an item unchecked only if another one is checked

    How to change the scrollbar color using css [duplicate]

    CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]

    How to center multiple divs inside a container in CSS

    How to change the border of an element when selected?

    How to make CSS color transition time correctly with transform perspective?

    How to keep a div's height 100%?

    Hover img to show an absolutely positioned div isn't working

    How to crop image with css

    After ul li's float left ,how can I make text-align center?

    How to set padding-left to my custom textbox in css?

    How to style SVG via css?

    how to I use an Arabic font in my css?

    CSS triangle how to remove white space on the right

    How can i add a css rule for this code?

    How do I move the search bar to the top without hiding it? [closed]

    How to use Bootstrap 3 grid if elements are tiled with different height and widths

    how to correctly render a response on an gsp from on the same page as the request (REST call) in grails

    How to center a CSS Hexagon

    How to determine if image is hyperlinked?

    How is the force reload of javascript/css done in Symfony?