CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Amar Syla
Amar Syla

Reputation: 3653

Two fixed width divs, and another div with dynamic size between

The title says everything. I want something like this:

enter image description here

The left box should be positioned in the left, the right one in the right. They both should have fixed widths, e.g. 200px. The middle div should take the size between. Its width is not set, but it takes the width that's remaining.

Thanks.

Upvotes: 4

Views: 5239

Answers (6)

bkmalan
bkmalan

Reputation: 183

I'm late to the party, still here goes.

This can be done using flexbox.

HTML

<div class="flex">
  <div class="fixed-div"></div>
  <div class="dynamic-div"></div>
  <div class="fixed-div"></div>
</div>

CSS

.flex {
  display:flex;
 }

.fixed-div {
  width:30px;
  background-color:blue;
  height:200px;
 }

.dynamic-div {
  width:100%;
  background-color:red;
  height:200px;
  margin: 0px 10px;
 }

You can checkout the implementation here.

Upvotes: 0

Vish
Vish

Reputation: 383

I would personally avoid using JS and do this using CSS. You can add a #container wrapper and then define the width to whatever you want and then use % for the left right and the middle div's

Sample CSS below:

<div id="container"> 
        <div id="left-column"> </div>
        <div id="middle-column"> <p>Content goes in here and dynamically stretches</p></div>
        <div id="right-column"> </div>
</div>

#container{
   float:left;
   width:1000px;
   *background-color:blue;
}
#left-column, #middle-column, #right-column{
        height:500px;
        float:left;
}
#left-column, #right-column {
    width:20%;
    background-color:red;
}

#middle-column {
    background-color:green;
    width:60%;
}

Upvotes: 0

Instance Noodle
Instance Noodle

Reputation: 227

You can try this one FIDDLE just html and css, without javascript

<div class="container">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>

CSS 

div {
    height:500px;
    position:absolute;
    border:0px;
    padding:0px;
    margin:0px;
}
.c1, .c3 {
    width: 200px;
    background-color:red;
}
.c1, {
    left:0px;
}
.c3 {
    right:0px;
}
.c2 {
    margin-left:10px;
    margin-right:10px;
    background-color:blue;
    left:200px;
    right:200px;
}
.container {
    width:99%;
}

Upvotes: 2

CME64
CME64

Reputation: 1672

[updated]

use a table, it will adjust it's own width. float style was the first that came to my mind but it doesn't adjust the element's width to fill in the gap.

html:

<table>
    <tr>
        <td style="width:10%;"><div id="d1"></div></td>
        <td><div id="d2"></div></td>
        <td style="width:10%;"><div id="d3"></div></td>
    </tr>
</table>

css:

#d1,#d3{
    background-color:red;
    width:100%;
    height:300px;
}
#d2{
    background-color:blue;
    width:100%;
    height:300px;
}
table{
    width:100%;
    height:100%;
}

DEMO

update:

if you don't want to use tables or excessive js calculations use this:

#d1,#d3{
    float:left;
    background-color:red;
    width:10%;
    height:300px;
}
#d2{
    float:left;
    background-color:blue;
    width:80%;
    height:300px;
}

DEMO

Upvotes: 0

bot
bot

Reputation: 4921

Here's a working one.

Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)

The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.

The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS

HTML

<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>

CSS

.leftsidebar 
{ 
height: 608px; 
width: 60px; 
background:red; 
float:left; } 

.rightsidebar 
{ 
background:blue; 
height: 608px; 
width: 163px; 
float:right; 
} 

.content 
{ 
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}

Upvotes: 3

yeyene
yeyene

Reputation: 7380

Here is the DEMO http://jsfiddle.net/yeyene/GYzVS/

Working great on onReady and onResize too.

JS

$(document).ready(function(){
    resizeMid();    
    $(window).resize(function() {
      resizeMid();
    });    
});  

function resizeMid(){
    var mid_width = $('#main').width() - ($('#left').width()+$('#right').width());
    $('#middle').css({'width':mid_width});
}

HTML

<div id="main">
    <div id="left">Left</div>
    <div id="middle">Middle</div>
    <div id="right">Right</div>
</div>

CSS

html, body{
    margin:0;
    padding:0;
}
#main {
    float:left;
    width:100%;
    margin:0;
    padding:0;
}
#left {
    float:left;
    width:100px;
    height:300px;
    margin:0;
    background:red;
}
#middle {
    float:left;
    width:100%;
    height:300px;
    margin:0;
    background:blue;
}
#right {
    float:left;
    width:100px;
    height:300px;
    margin:0;
    background:red;
}

Upvotes: 3

Related Questions