tags:

views:

1751

answers:

3

I've found a lot of similar questions, and tried out several solutions (including some of the so-called "holy grail" CSS layouts), but they don't quite do what I need.

I have a containing div (a CSS containing block) with id right. Inside it on the left side, I want a fixed-width div (a splitter bar, but it doesn't matter what it's being used for; id splitpane); on the right, filling the rest of the space, another div (id right-box below).

I've tried making the two inner divs display: inline-block (with vertical-align: top), setting the left one to width: 3px, but then there's no way to set the right to have width 100% - 3px. I've also tried using the float: left/margin-left: -100%/margin-left: 3px trick, but it has the same problem: the 100% plus the 3px overflows the parent containing block and causes a scroll bar to pop up. (Of course, it's not the scroll bar per se that's the problem; I could use overflow: hidden to remove it, but then content on the right would be truncated.)

Currently I'm using width: 99.5% for the right div, but that's a terrible hack (and is subject to overflow depending on screen width). It looks a bit like this:

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

With CSS as follows (float 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 even possible to do this? This is for an internal app., so solutions only need to work in Firefox 3 (if they are specific to FF3, though, preferably it's because the solution is standards-compliant but other browsers aren't, not because it's using Firefox-only code).

A: 

If the div #right-box is only going to contain non-floated content it might be an idea to just put the content inside #right instead and let it wrap around the floated #splitpane.

Annan
+1  A: 
Dels
Divs aren't semantic in the first place. You're supposed to use divs to mark up things that have no meaning, that's why it's called a "div" (arbitrary division).
Rahul
yes i know div not semantic, what i mean was "empty element" was not semantic
Dels
I don't want to specify an absolute width for anything except the splitter.
+2  A: 

DIVs are the wrong element type for this since they don't "talk" to each other. You can achieve this easily with a table:

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

The 100% will make the rightBox as wide as possible but within the limits of the table.

Aaron Digulla
This solution appears to require that I specify an absolute width for the containing element (`width:200px` in the above example); I don't want to have to do that. Plus, I'd prefer not to use tables.
You only need to specify a width if you don't like the default of 100%. And tables are OK to use even with CSS. DIVs should be used for content that is *below* each other, not next to each other on the same line.
Aaron Digulla
@Aaron Digulla, have you heard about CSS float?
rochal
@rochal: Have you heard about all the problems floats cause? Like creating N elements with the exact same height where N > 2?
Aaron Digulla