CODEWITHSUNDEEP
htmlcss
Thomas Kowalski
Thomas Kowalski

Reputation: 2184

How to set a div to fill the space remaining in his parent (horizontally)?

I've been roaming around lately to find a way to have two boxes in my page, one being at a constant width (260px) and the other being the rest of the space. Both are meant to be on the same line or, at least, their both top are aligned :

|--------------------------------------------------|
||------------||----------------------------------||
||   260 px   ||         Automatic width          ||
||------------||               text               ||
|              |               here               ||
|              |----------------------------------||
|--------------------------------------------------|

As you can see on the little explaination, I've got a wrapper, which is always 90% of the page. And then, I've got my right panel which has to be adapted depending on the screen size, and its width is (100% of the wrapper) - 260px. Though, I can't get to do that, even if I tried lots of different ideas. Here is my code :

#wrapper {
    width: 90%;
    margin: auto; /* Center it ! */
    display: block; 
    background-color: gray;
}
#right
    display: block;
    background-color: gray;
    float: left;
    width: auto; /* What can I put here ? */
}
#left { /* This one works more or less flawlessly */
    background-color: gray;
    display: block;
    float: left;
    width: 260px;
}

Thank you very much in advance,
Thomas

Upvotes: 0

Views: 46

Answers (3)

codenine
codenine

Reputation: 26

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">

    <style>
        #wrapper {
            width: 90%;
            margin: auto; /* Center it ! */
            display: block; 
            background-color: gray;
        }
        #right {
            display: block;
            background-color: gray;
            /*float: left;  - Remove this */ 
            width: auto; /* What can I put here ? A: Leave it like that*/
            height: 100vh;
        }
        #left { /* This one works more or less flawlessly */
            background-color:#DFDEDE;
            display: block;
            float: left;
            width: 260px;
              height: 100vh;
        }

    </style>
</head>
<body>
    <div id="wrapper">
        <div id="left"> Left</div>
        <div id="right"> Right </div>
    </div>
</body>
</html>

Here is your demo

Upvotes: 0

Kawinesh S K
Kawinesh S K

Reputation: 3220

CSS

#wrapper {
    width: 90%;
    margin: auto; /* Center it ! */
    display: block; 
    background-color: gray;
}
#right {
  display: table-cell;
  background-color: gray;
  /* float: left; */
  width: auto;
}
#left {
  background-color: gray;
  display: table-cell;
  /* float: left; */
  width: 260px;
}

DEMO

Upvotes: 0

Kay
Kay

Reputation: 537

You could use the following css

#right {
    display: block;
    background-color: gray;
    float: left;
    width: calc(100% - 260px);
}

According to http://caniuse.com/#feat=calc, this will probably work for all modern browsers and IE9 and up.

Upvotes: 4

Related Questions