Expand a div to fill the remaining width

Question

Expand a div to fill the remaining width

I want a two-column div layout, where each one can have variable width e.g.

div {

  float: left;

}



.second {

  background: #ccc;

}

<div>Tree</div>

<div class="second">View</div>

multiple-columns css html

3 years ago by Bharatgxwzm

3 Answers

Login / Signup to Answer the Question.

Login Signup

**akshay1995** · Answer 1 · 2021-07-28T13:31:42

I just discovered the magic of flex boxes (display: flex). Try this:



<style>

  #box {

    display: flex;

  }

  #b {

    flex-grow: 100;

    border: 1px solid green;

  }

</style>

<div id='box'>

 <div id='a'>Tree</div>

 <div id='b'>View</div>

</div>

**pankajshivnani123** · Answer 2 · 2021-07-30T04:15:56

Use the CSS Flexbox flex-grow property to achieve this.

html, body {

  height: 100%;

}

body {

  display: flex;

}

.second {

  flex-grow: 1;

}



<div style="background: #bef;">Tree</div>

<div class="second" style="background: #ff9;">View</div>

**RoliMishra** · Answer 3 · 2021-08-03T12:07:08

Use calc:

.leftSide {

  float: left;

  width: 50px;

  background-color: green;

}

.rightSide {

  float: left;

  width: calc(100% - 50px);

  background-color: red;

}

<div style="width:200px">

  <div class="leftSide">a</div>

  <div class="rightSide">b</div>

</div>

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

Expand a div to fill the remaining width

3 Answers

Login / Signup to Answer the Question.