3

I have two elements aligned horizontal. I want the right one to have a dynamic width and the left one to take up as much space as is left. How Do I do that?

Se JSFiddle

or code

<div class="wrapper">
  <div style="background:red;" class="one">hello</div>
  <div style="background:blue" class="two">dude</div>
</div>

.wrapper > div {
    border: 1px yellow solid;
    display: table-cell;
    height:80px;
}

.one {
    width: 100%;
}

.two {
    width: 100px;
}
WIRN
  • 915
  • 1
  • 16
  • 31
  • Check layouts [here](http://www.dynamicdrive.com/style/layouts/category/C13/), for you [this one](http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-22-fluid-fixed/), or other solutions. – skobaljic Nov 07 '14 at 08:26

3 Answers3

2

.wrapper {
  width: 100%;
  height: 200px;
  border: 2px solid blue;
}

.right {
  height: 200px;
  width: 60%;
  background: red;
  float: right;
}

.left {
  width: auto;
  height: 200px;
  background: green;
}
<div class="wrapper">
  <div class="right">hello</div>
  <div class="left">dude</div>
</div>

You can align two element like div horizontal to each other having right element can be dynamic and left element set his width automatically. To take width automatically you can use width:auto; property for first div. And second div having some width in percent or pixel so first div can take remaining width and set it right using float right property. I have created it with example.

If you change width of right element then width of left element will take remaining width automatically.

you can also take reference

Help with div - make div fit the remaining width

InSync
  • 4,851
  • 4
  • 8
  • 30
Swapnil Motewar
  • 1,080
  • 6
  • 12
0

try this..

.wrapper>div {
  border: 1px yellow solid;
  display: table-cell;
  height: 80px;
}

.one {
  width: 100%;
}

.two {
  width: auto;
}
<div class="wrapper">
  <div style="background:red;" class="one">hello</div>
  <div style="background:blue" class="two">dude</div>
</div>
InSync
  • 4,851
  • 4
  • 8
  • 30
Nivya M
  • 102
  • 1
  • 1
  • 7
0
<div class="sec">
<div class="sec1">Doaa Mahmoud</div>
<div class="sec2">Ali</div>
</div>


.sec {
width: 80%;
height: 80px;
background-color: rgb(255, 255, 255);
display: flex;

}

.sec1 {
background-color: rgb(45, 170, 192);
padding: 15px;
width: 80%;
margin-right: 20px;

}

.sec2 {
background-color: rgb(45, 170, 192);
padding: 15px;
width: calc((20%-30px)/1);

}

doaa Mahmoud
  • 11