CODEWITHSUNDEEP
htmlcssfluid-layoutfluid-dynamics
pors
pors

Reputation: 301

CSS : How to make two column right fluid left fluid depend on right

I already search and there is no exactly solution for me. I am trying to making Two Columns:

Left fluid + Right fluid.

Left column is contain input box with 100% width and the left column width is depend on right column width.

So if B is longer text, A should be shorter.

Please take look at the below image

Please take look at the below image

Any suggestion?

Upvotes: 0

Views: 530

Answers (2)

B.Pukhalskyi
B.Pukhalskyi

Reputation: 51

Try this

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Site name</title>
    </head>
<style>
        #container{
         width: 900px;
    }
    #container:after{clear: both; display: table; content: "";}
    #container:before{ display: table; content: "";}
    .left-column{
        width: 400px;
        float: left;
        padding: 5px; 
        background: green;
        box-sizing: border-box;
    }
    .left-column input{width: 100%;}
    .right-column{
        float: right;
        padding: 5px;
        width: 500px;
        background: violet;
        box-sizing: border-box;
    }
</style>
<body>
   <div id="container"> 
       <div class="left-column">
           <input name="f-name" type="text"></input>
       </div>
       <div class="right-column">
           Lorem ipsum dolor sit amet, consectetur 
           adipiscing elit, sed do eiusmod tempor 
           incididunt ut labore et dolore magna aliqua. 
           Ut enim ad minim veniam, quis nostrud 
           exercitation ullamco laboris nisi ut 
           aliquip ex ea commodo consequat. Duis 
           aute irure dolor in reprehenderit in 
           voluptate velit esse cillum dolore eu 
           fugiat nulla pariatur. Excepteur sint 
           occaecat cupidatat non proident, sunt 
           in culpa qui officia deserunt mollit 
           anim id est laborum.
       </div>
   </div>
</body>
</html>

Upvotes: 0

Nenad Vracar
Nenad Vracar

Reputation: 122115

You can use Flexbox and just set flex: 1 on input.

.el {
  display: flex;
}
input {
  flex: 1;
  background: #A3FF9A;
}
p {
  background: #FF87DE;
  margin: 0;
}
<div class="el">
  <input type="text">
  <p>Lorem ipsum dolor.</p>
</div>

Upvotes: 1

Related Questions