0

I am trying to accomplish a simple 'liquid layout' with two width=50% boxes on the left and one width=50% box on the right, where the height of the rightmost box follows the leftmost boxes and vice versa. I want a spacing between the boxes of 10px, a nice 3d feel for the boxes and no border or margin on the outside.

I have tried to implemented this using DIV tags only, but didn't succeed. Due to lack of time I switched to a more familiar TABLE/TR/TD approach. Indeed the table cell height followed the total table height, however when I introduces DIV tags in the table cells so I could implement my 3D box border, the height shrinked again. No matter at which places in my code I try to put "height=100%", my browser doesn't seem to act on it.

The problem is related to a question already asked on StackOverflow before (linked here). The proposed solution there is to use TABLE instead of DIV. In my case this will not work if I want to stick to both my 3D boxes and the spacing between my cells.

I have included my code below containing two different approaches, both not working. Can somebody suggest me a way to fix my code so that the height of the box on the right will become 100% of the size of its TD container (shown green in the example?). Any other approaches with the same result are also very welcome. UPDATE: Tor Valamo posted an answer pointing out where to place the 100%. Unfortunately, the result works only in IE and Firefox, not Chrome. The search therefore continued for a browser-independent solution.

UPDATE: After receiving several useful suggestions, I've posted my own solution which is the only one acceptable to me at this point. Unfortunately it uses TABLE not DIV. Some work has been done on a DIV solution, for anyone who'd like to finish the job, the sources codes are available here.

<html>
<head>
  <style>
 .outsidetable {
  border-collapse: collapse;
  border-style: hidden;
 }

 .outsidecell {
  border-width: 10px;
  border-color: #FFF;
  padding: 0px;
  border-style: solid;
  background-color: #0F0;
 }

 .fancybox  {
  border-style: outset;
  border-color: yellow;
  border-width: 2px;
  background-color: #CCF;
 }
  </style>
</head>
<body>

<!-- First example, using DIV to draw the boxes 
  and TABLE/TR/TD for the layout -->
<p>
<table class=outsidetable>
  <tr>
 <td class=outsidecell><div class=fancybox>
  Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt 
  ut labore et dolore magna aliqua. 
 </div></td>
 <td class=outsidecell rowspan=2><div class=fancybox height=100% style="height: 100%">
  Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt 
  ut labore et dolore magna aliqua. 
 </div></td>
  </tr>
  <tr>
    <td class=outsidecell><div class=fancybox>
  Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt 
  ut labore et dolore magna aliqua. 
 </div></td>
  </tr>
</table>
</p>

<!-- Second example, using TABLE instead of DIV to draw the boxes 
  (and again TABLE/TR/TD for the layout) -->
<p>
<table class=outsidetable>
  <tr>
 <td class=outsidecell><table class=fancybox><tr><td>
  Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt 
  ut labore et dolore magna aliqua. 
 </td></tr></table></td>
 <td class=outsidecell rowspan=2><table class=fancybox height=100% style="height: 100%"><tr><td height=100% style="height: 100%">
  Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt 
  ut labore et dolore magna aliqua. 
 </td></tr></table></td>
  </tr>
  <tr>
    <td class=outsidecell><table class=fancybox><tr><td>
  Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt 
  ut labore et dolore magna aliqua. 
 </td></tr></table></td>
  </tr>
</table>
</p>

</body>
</html>
Community
  • 1
  • 1
littlegreen
  • 7,290
  • 9
  • 45
  • 51

6 Answers6

2

First, do not use tables for layout. That's a semantic no-no. With that out of the way, see The Perfect 3 Column Liquid Layout by Matthew James Taylor. Matthew has created a great implementation of multi-column liquid layouts that can be sized in either percentage or em widths.

andrewle
  • 1,731
  • 13
  • 11
  • 1
    His problem involves two vertically adjacent parts of **variable size and proportion** next to one part which is the same size as the two other combined. A div layout cannot solve the problem. Paste his code into an html file and open it. – Tor Valamo Dec 12 '09 at 00:38
  • I must add, it might be solvable if he's not picky about the two vertical parts being the same height regardless of content. – Tor Valamo Dec 12 '09 at 00:40
  • Thank you for the link, but isn't that code only useful for a three-column layout? I'd be grateful if you could supply me with some working code on how to do it with DIV and CSS only. I tried, and nearly succeeded too, the main problem I had was with the 10px spacing between the cells; the DIV boxes started overlapping and I didn't find a way to keep the spacing constant under liquid conditions. – littlegreen Dec 12 '09 at 01:22
  • @Tor: yes, i am picky about that:) – littlegreen Dec 12 '09 at 01:23
  • Hey guys, try checking out the "Stacked Columns" in the link I posted. I've used example code there for layouts that required columns of equal height but different background colors. Maybe that will work for you too. – andrewle Dec 12 '09 at 02:24
  • Hello, tried your link.. it's actually great stuff! Really helps me to get a grip on doing it (properly) with DIV tags. So +1 for that. However, your stacked columns example doesn't include my problem of two left columns covering the height of one right column. I'll have to experiment a bit more to get that working based on the double-column layout. – littlegreen Dec 13 '09 at 22:55
2

Use the outline of the table cell instead of the border, and it will work. And drop the containing div inside it too!

<html>
<head>
    <style>
        table {
            border-spacing:10px;
            border:0px;
        }
        td {
            width:50%;
            outline-style:outset;
            outline-color:yellow;
            background-color:#CCF;
            vertical-align:top;
        }
        * html td { /* IE hack because it doesn't recognise outline */
            border-style:outset;
            border-color:yellow;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td>
            Lorem ipsum dolor sit amet
        </td>
        <td rowspan="2">
            Lorem ipsum dolor sit amet
        </td>
    </tr>
    <tr>
        <td>
            Lorem ipsum dolor sit amet
        </td>
    </tr>
</table>

</body>
</html>
Tor Valamo
  • 33,261
  • 11
  • 73
  • 81
  • Dude, thanks... +1 for effort :-) But I also cannot use this.. I cannot use the border-spacing property since it has the side-effect of creating a white border around my table that I cannot disable and I don't want (I want to use this layout inside a current webpage and I need it to be 100% width) – littlegreen Dec 13 '09 at 22:36
  • See another solution I posted, which works... in most conditions. DIV-based. – Tor Valamo Dec 13 '09 at 23:27
  • http://stackoverflow.com/questions/1891670/how-to-set-element-div-table-other-height-to-100-of-its-container/1898179#1898179 – Tor Valamo Dec 13 '09 at 23:28
1

Try:

.outsidecell {
  height:100%;
  <other stuff here>
}

This works, because there is an 'inner' content box which is where the drawing of the content happens. This inner box is only as big as the content it has. So even if that content says 100%, it will only be 100% to itself, and not the parent container. So you need to expand the parent container to its own actual 100% size.

That's probably not the actual mechanics behind it, but in so many words...

Tor Valamo
  • 33,261
  • 11
  • 73
  • 81
  • Hey, you're right in IE and Firefox, but it doesnt work in Chrome. I also don't quite understand why this has to be; I thought the green colour was proof already that the container was 100% height. Apparently not. If you can figure out how to make it work in Chrome too, you tha man!:) – littlegreen Dec 12 '09 at 01:17
  • I made a new answer about it. Works in Chrome too. :) – Tor Valamo Dec 12 '09 at 12:30
1

As horrible as the use of tables may be, after playing with all the proposed solutions I have found only one solution (using tables) that satisfies all my constraints. One day I hope to be able to translate Andy's code to a working solution with DIV's, right now I'm afraid I'm stuck with this. EDIT: For anyone who'd like to try, all source codes are available here.

To recap, my constraints were,

  • Completely liquid layout: any cell follows the height of any other cell
  • Spacing between the cells of 10px inside (but not outside)
  • 3D border around the cells
  • Working for all browsers that I have on my computer (Chrome, IE, Firefox)

Summarizing my solution, I've used empty spacer cells to implement the cell spacing since all other spacing methods known to me didn't satisfy all the constraints:

  • CSS border-spacing adds a border around the whole table too that I don't want
  • Selective cell borders limit my ability to add the 3D borders to my cells

Filling the spacer cells with nbsp's made them too high, so I chose to leave them empty and set the CSS empty-cells property to "show". The other option would have been to fill them up with 1x1 spacer GIF's but that is so 1990...

The code:

<html>
<head>
  <style>
 .outsidetable {
  border-collapse: separate;
  border-style: hidden;
  empty-cells: show;
 }

 .spacercell {
  width: 10px;
  height: 10px;
  border-style: none;
 }

 .contentcell {
  border-style: outset;
  border-color: yellow;
  border-width: 2px;
  background-color: #CCF;
 }

  </style>
</head>
<body>

<p>
<table class=outsidetable>
  <tr>
 <td class=contentcell>
  Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt 
  ut labore et dolore magna aliqua. 
 </td>
 <td class=spacercell></td>
 <td class=contentcell rowspan=3>
  Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt 
  ut labore et dolore magna aliqua. 
 </td>
  </tr>
  <tr>
 <td class=spacercell colspan=3></td>
  </tr>
  <tr>
 <td class=contentcell>
  Lorem ipsum dolor sit amet, 
  consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt 
  ut labore et dolore magna aliqua. 
 </td>
 <td class=spacercell></td>
  </tr>
</table>
</p>

</body>
</html>
littlegreen
  • 7,290
  • 9
  • 45
  • 51
1

Here's a div based one, which works as long as the right cell isn't filled with more than the other two combined. This works in IE only if you use an xhtml doctype.

    .inner {
        border:5px outset yellow;
        background-color:#CCF;
    }
    .outer {
        position:relative;
        border:1px solid #000;
        width:500px;
    }
    .left {
        position:relative;
        width:240px;
    }
    .right {
        position:absolute;
        top:0;
        right:0;
        bottom:0;
        width:240px;
    }

<div class="outer">
    <div class="inner left">
        Lorem<br />
        Lorem<br />
    </div>
    <div class="inner left">
        Schmorem<br />
        Schmorem<br />
        Schmorem<br />
    </div>
    <div class="inner right">
        Ipsum schmipsum!<br />
        Ipsum schmipsum!<br />
    </div>
</div>
Tor Valamo
  • 33,261
  • 11
  • 73
  • 81
  • It doesn't address my requirement of 10px spacing between the cells, and as you mention yourself, it's also not completely liquid. I think this code combined with some of the CSS in andymism's "Stacked column layout" will eventually result in a working solution with DIV's, but I don't have the time to work it out now. Sources are available here: http://www.antiflu.dds.nl/layout.zip – littlegreen Dec 16 '09 at 15:05
  • Correction: strict doctype. XHTML doctype is not per definition strict. There are enough XHTML doctypes which triggers quirksmode. – BalusC Dec 16 '09 at 15:19
0

If you set a height on your columns and height of the div = 100%, It will work for you..that is if your design allows you to set the height on the TD :).

PortageMonkey
  • 2,675
  • 1
  • 27
  • 32