CODEWITHSUNDEEP
css
mimic
mimic

Reputation: 5224

How to stretch a div in the container of 2 divs?

I have a fiddle, please check it here: https://jsfiddle.net/p2oe6s7w/

I need the green box to stretch horizontally and take all the remaining space from the yellow box which has fixed width. I can gain it only setting up the green box say 90% of width which I don't like because it's always different - https://jsfiddle.net/p2oe6s7w/1/ . I just want these 2 blocks staying side by side.

.left {
  background: green;
  border: 1px solid blue;
  float: left;
  width: 90%;

}
.right {
  background: yellow;
  width: 60px;
  border: 1px solid red;
  float: left;
}

<div class="container">
  <div class="left">
    <pre>
      dkdkdkd
      dkdkdkdkd
      fjfjf

      fjfjfj
    </pre>
  </div>
  <div class="right">
    <button>
    dfdf
    </button>
  </div>
</div>

Another thing to know is there is a list of containers setting vertically. So I don't think that absolute positions would work.

Pure css only please.

Upvotes: 0

Views: 749

Answers (3)

Sharad
Sharad

Reputation: 743

Use below css

.left {
  background: green;
  border: 1px solid blue;
  float: left;
  width: calc(100% - 60px);

}
.right {
  background: yellow;
  width: auto;
  border: 1px solid red;
  float: left;
}

Please check it here. fiddle

Upvotes: -1

Temani Afif
Temani Afif

Reputation: 272723

Simply use flex like this:

.container {
  display: flex;
  align-items: flex-start;
}

.left {
  background: green;
  border: 1px solid blue;
  flex: 1; /* This will make your element fill the remaining space*/
}

.right {
  background: yellow;
  width: 60px;
  border: 1px solid red;
}
<div class="container">
  <div class="left">
    <pre>
      dkdkdkd
      dkdkdkdkd
      fjfjf
      
      fjfjfj
    </pre>
  </div>
  <div class="right">
    <button>
    dfdf
    </button>
  </div>
</div>

Upvotes: 2

Johannes
Johannes

Reputation: 67748

You can use this CSS:

html, body {
  margin: 0; 
}
* {
  box-sizing: border-box;
}
.left {
  background: green;
  border: 1px solid blue;
  float: left;
  width: calc(100% - 60px);
}
.right {
  background: yellow;
  width: 60px;
  border: 1px solid red;  
  float: left;
}

The essential line is width: calc(100% - 60px);, i.e. the full width minus the width of the yellow DIV, but you also need the other stuff ( box-sizing: border-box; etc.) to make everything fit.

https://jsfiddle.net/mLkjv565/1/

Upvotes: 2

Related Questions