CODEWITHSUNDEEP
htmlcss
JaimeASV
JaimeASV

Reputation: 163

set width 100% to div in middle of two fixed width divs, all inside another 100% width div

This is the problem.

I have one div that is responsible in width and height. Inside it i have two others with fixed width size, one is on the left and the other is on the right.

I need another one two stay in the middle of these two with the width always filling the distance between the one in the left and the other in the right.

Were is the picture of, the divs on the top is how i have them now, the bottom one is the objective.

enter image description here

its possible to see the center div already with responsive height, i cant find anything that works for the width.

These are the CSS

The parent div

#full-size{
  height:100%;
  width:100%;
  overflow:hidden;
  border: 1px solid #000;
  top:5px;
  position:relative; 
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#FFF;
}

The left and right divs

#left-content {
  height:100%;
  width:200px;
  border:1px solid #000;
  overflow:auto;
  float:left;
    position:relative; 
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#222;
}

#right-content {
  height:100%;
  width:200px;
  border:1px solid #000;
  overflow:auto;
  float:right;
    position:relative; 
    padding: 5px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#222;
}

And what i have for now in the center div

#center-content {
  height:100%;
  border:1px solid #000;
  overflow:auto;
  margin-left:5px;
  margin-right:5px;

  display:inline-block;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    background-color:#222;

}

Hope its possible to achieve this.

Upvotes: 2

Views: 244

Answers (2)

Moshtaf
Moshtaf

Reputation: 4903

Use this:

<div id='container'>
    <div id='right'>
        Right Fixed Width Col
    </div>
    <div id='left'>
        Left Fixed Width Col
    </div>
    <div id='middle'>
        Middle Responsive Width Col
    </div>
</div>

And CSS:

#container {
    overflow: hidden;
}
#right {
    float: right;
    width: 180px;
    background-color:red;
}
#left {
    float: left;
    width: 180px;
    background-color:red;
}
#middle {
    margin: 0 180px;
    background-color:blue;
}


>>> JSFiddle Sample

Upvotes: 2

Arnelle Balane
Arnelle Balane

Reputation: 5487

Having a markup like this: 

<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
  <div class="middle"></div>
</div>

You can achieve it with the following CSS:

.parent {
  ...
  width: 100%;
  padding: 0 200px
  ...
}

.left {
  ...
  float: left;
  width: 200px;
  margin-left: -200px;
  ...
}

.right {
  ...
  float: right;
  width: 200px;
  margin-right: -200px;
  ...
}

.middle {
  ...
  width: 100%;
  ...
}

Upvotes: 0

Related Questions