CODEWITHSUNDEEP
jquerycss
Phillip
Phillip

Reputation: 1570

How do you resize a container between two others?

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>

Upvotes: 0

Views: 143

Answers (1)

DRD
DRD

Reputation: 5813

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);
}

Upvotes: 2

Related Questions