CODEWITHSUNDEEP
htmlcss
dotnetnoob
dotnetnoob

Reputation: 11360

DIV to fill available space

I'm trying to create a responsive section on my webpage. I'll use media queries to size content and turn blocks of content off, but I also need to add the following behaviour.

On the page, I have 3 columns, like this:

enter image description here

enter image description here

The yellow and green blocks relate to fixed width sections - think of them as sidebars.

The red block needs to be fluid and fill the space available inside the parent wrapper. One or more of the fixed width blocks may be hidden, so it's not possibe to use a right margin or padding on the fluid block because it may or may not be relevant. As such I struggling to come up with a solution.

Here's an example of the HTML that might sit on the page.

<div class="wrap">
    <div class="fluid">
        <p>This should expand to fill the space available</p>
    </div>
    <div class="fixed">
        <p>Fixed width, but can be hidden</p>
    </div>
    <div class="fixed">
        <p>Fixed width, but can be hidden</p>
    </div>
</div>

Any ideas how this can be acheived?

Upvotes: 1

Views: 234

Answers (3)

Rishabh Malhotra
Rishabh Malhotra

Reputation: 269

You can Try some thing like this (uses jquery):

width_equalizer();

$(window).resize(function(){
    width_equalizer();
});


function width_equalizer()
{
    var width_of_fixed = 100
    var viewport_width = $(document).width();
    $('.fixed').css('width',width_of_fixed)
    $('.fluid').css('width',viewport_width - (2.5*width_of_fixed))
}
.fluid{
    display:inline-block;
    background:red;
    height:100px;
    vertical-align:top;
}

.fixed
{
    display:inline-block;
    height:100px;
    vertical-align:top;
}

.wrap
{
    width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="wrap">
    <div class="fluid">
        <p>This should expand to fill the space available</p>
    </div>
    <div class="fixed" style="background:yellow;">
        <p>Fixed width, but can be hidden</p>
    </div>
    <div class="fixed" style="background:green;">
        <p>Fixed width, but can be hidden</p>
    </div>
</div>

Upvotes: 0

Bipu Bajgai
Bipu Bajgai

Reputation: 404

Try this

<div class="wrap">
    <div class="fixed">
        <p>Fixed width, but can be hidden</p>
    </div>
    <div class="fixed">
        <p>Fixed width, but can be hidden</p>
    </div>
    <div class="fluid">
        <p>This should expand to fill the space available</p>
    </div>
</div>

CSS

.fixed{
    float: right;
    height: 200px;
    width: 200px;
    background: #000;
    color: #fff;
}
.fixed:first-child{background:red;}
.fluid{
    overflow: hidden;
    height: 200px;
    background: red;
}

Link to Fiddle

Upvotes: 1

Oriol
Oriol

Reputation: 288680

You can change your HTML and use floats:

.fixed {
  float: right;
  width: 25%;
}
.wrap, .fluid { /* Clear float */
  overflow: hidden;
}
<div class="wrap">
  <div class="fixed">
    <p>Right - Fixed width, but can be hidden</p>
  </div>
  <div class="fixed">
    <p>Center - Fixed width, but can be hidden</p>
  </div>
  <div class="fluid">
    <p>Left - This should expand to fill the space available</p>
  </div>
</div>

Alternatively, the new way is using flexible boxes:

.wrap {
  display: flex;
}
.fixed {
  width: 25%;
}
.fluid {
  flex-grow: 1; /* Grow to cover remaining space */
}
<div class="wrap">
  <div class="fluid">
    <p>Left - This should expand to fill the space available</p>
  </div>
  <div class="fixed">
    <p>Center - Fixed width, but can be hidden</p>
  </div>
  <div class="fixed">
    <p>Right - Fixed width, but can be hidden</p>
  </div>
</div>

Upvotes: 1

Related Questions