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;
}
.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
<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);
}
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>