6

I would like an element to fill the remaining space of a parent div. I have managed to do this, You can see it here "link removed" but the filling div (right) sits underneath the left div. I bascially want the right div to start where the left div finishes.

Hope this make sense.

    <html>
    <head>
    <title></title>
    <style type="text/css">
    #left {
        float:left;
        width:180px;
        background-color:#ff0000;
        height:20px;
    }
    #right {
        width: 100%;
        background-color:#00FF00;
        height:30px;
    }
    </style>
    </head>

    <body>
    <div>
    <div id="left">Nav</div>
    <div id="right">This is the space I need to fill but not go underneath the nav div</div>
    </div>
    </body>
    </html>
Mitch
  • 75
  • 7
  • I don't think it is possible to fill that space with width 100%. The only way to get the right div to not go under the left div is to float the right div, but when you do that, width 100% causes it to go to the next line. If you remove width 100% it does stack nicely beside the left div, but will not fill completely. You may have to re-evaluate your approach, it would be easier if I knew what you were trying to accomplish so I could offer alternative solutions. – Zoidberg Jun 20 '11 at 10:56

2 Answers2

12

On #right, simply remove width: 100%, and add overflow: hidden.

See: http://jsfiddle.net/hJzJf/ - (I'm assuming your heights are just for testing purposes)

Why does this work?

See: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

thirtydot
  • 224,678
  • 48
  • 389
  • 349
3

Set margin-left: 180px; on the #right element. This will offset it by the width of the first element.

http://jsfiddle.net/DHSej/

Kyle
  • 65,599
  • 28
  • 144
  • 152