Pixel and percentage width divs side by side

Question

I found a lot of similar questions and tried out several solutions (including some of the so-called CSS “Holy Grail” layouts), but they don’t quite do what I need.

I have a containing div (block containing CSS) with id right . Inside this on the left, I want a div with a fixed width (a separator, but no matter what it is used for: id splitpane ); on the right, filling the rest of the space with another div (id right-box below).

I tried to make two internal divs display: inline-block (with vertical-align: top ), setting the left to width: 3px , but then there is no way to set the right to 100% - 3px wide. I also tried using the float: left / margin-left: -100% / margin-left: 3px , but it has the same problem: 100% plus 3px overflows the parent block and causes the scrollbar to appear. (Of course, this is not a scroll bar per se, I could use overflow: hidden to remove it, but then the content on the right will be truncated.)

I am currently using width: 99.5% for the right div, but it is a terrible hack (and prone to overflow depending on screen width). It looks something like this:

 <div id="right"><div id="splitpane"></div><div id="right-box"> ... </div></div> 

With CSS as follows (floating point version, but the inline block version is similar):

 #right { display: inline-block; vertical-align: top; height: 100%; width: 85%; /* this is part of a larger div */ } #right-box { width: 99.5%; /* stupid hack; actually want 100% - 3px for splitter */ height: 100%; } #splitpane { float: left; width: 3px; height: 100%; background: white; border-left: solid gray 1px; border-right: solid gray 1px; cursor: e-resize; } 

Is it possible to do this? This is for an internal application. Therefore, solutions should work only in Firefox 3 (if they are specific to FF3, although it is desirable because the solution is compatible with the standards, but there are no other browsers, and not because it uses only Firefox code).

Answer 1

It is possible. Since block level elements automatically expand to occupy any remaining horizontal space, you can use a block level element next to an unoccupied floating element with the desired width.

 <style type="text/css"> div { height: 100px; } #container { width: 100%; } #left { background: #FF0; } #splitpane { position: relative; float: right; background: #000; width: 3px; } </style> <div id="container"> <div id="splitpane"></div> <div id="left"></div> </div> 

See http://jsfiddle.net/georeith/W4YMD/1/

Answer 2

DIV is the wrong element type for this, because they do not "talk" to each other. This can be easily done using a table:

 <table style="width:200px"> <tr> <td id="splitpane" style="width: 3px">...</td> <td id="rightBox" style="width: 100%">...</td> <tr> </table> 

100% will make the right margin as wide as possible, but within the table.

Answer 3

why didn't you use margin-left (since it was a float layout) in the right window?

therefore there is no need to create a divider div ...

 #right{ width:200px; /*specify some width*/ } #rightbox{ float:left; margin-left: 3px; /*replace the splitter*/ /*margin: 0 3px; /*use this to give left & right splitter*/ */ } 

Yes, something like that, I hate an empty div, it's not semantic, and it's like moving a separator to an "old" table.

Answer 4

If the right margin of div # contains non-floating content, you might get the idea of ​​just placing the content inside #right and letting it wrap around the floating #splitpane.