Home/ Questions/Q 3754454
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T09:32:50+00:00

I’ve got a basic issue. Two <div> s side-by-side, the left <div> needs to

  • 0

I’ve got a basic issue. Two <div>s side-by-side, the left <div> needs to be able to have a ‘flexible’ width, as in when the <div> on the right isn’t displayed, the left <div> will then stretch to 100%.

My code currently is as follows, which doesn’t fulfil the above requirement.

<html>
        <head>
        <style>
        #container {
                display: block;
        }

        #box-left {
                width: 100%;
                height: 100px;
                background-color: red;
                float: left;
        }

        #box-right {
                width: 15%;
                height: 100px;
                background-color: blue;
                float: right;
        }
        </style>
        </head>
        <div id="container">
                <div id="box-left"></div>
                <div id="box-right"></div>
        </div>
        <body>

        </body>

Any pointers would be much appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    #container {
  display: table;
  table-layout: fixed;
}
#id-right, #id-left {
  display: table-cell;
  float: none;
}
#id-left {
  /* no width */
}
#id-right {
  width: 15%;
}

    Unfortunately, that doesn’t work in IE6, but apart from that it should do the trick.

    • 0