0

below is my code,

<div class="wrapper">
  <div class="left">
  </div>

  <div class="right">
  </div>
</div>

i have set the width of my wrapper to 100% i have width for left as 40px now.

1) i want to extend my right div width as much as browser window from 40px almost equal to 98.6% 2)i want to extend my left div height as much as right div height

how to fix this?

Friend
  • 1,326
  • 11
  • 38
  • 62

2 Answers2

1

Please try the css3 flexbox module, like this:

HTML

<div class="wrapper">
  <div class="left">
    left
  </div>

  <div class="right">
    right
  </div>
</div>

CSS

html,body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.wrapper {
  height: 100%;
  width: 100%;
  display:-moz-box;
  display:-webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.left {
  width: 40px;
  background: green;
}
.right {
  -moz-flex-box: 1;
  -webkit-flex-box: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  background: orange;
}

Please view the demo.About the CSS3 flexbox module, please click here.

Airen
  • 2,139
  • 1
  • 14
  • 10
0

It's hard to understand your question,

but here are a couple of ways i think will answer your question

.right{
   width:calc(100% - 40px);
}

or you can do it this way 

.right{
    height:100px;
    margin:0 20px;;
    background:#EEE;
}

Demo

There isn't really a way to make a element the height of a different element unless you use Javascript

iConnor
  • 19,997
  • 14
  • 62
  • 97