Originally Posted by MidiMagic View Post
How is this achieved? When you shrink the browser window, or use a different screen resolution, the divs won't stay put.
They will if you do it correctly.
You keep saying that, but you don't tell the correct way. Are you saving it so you can copyright and sell it?
How is this achieved? Whenever I try it, the list won't stay together, or the table pokes outside the div.
Do you have an example? Please post a URL.
I didn't put up the bad page on the web. I fixed it with a table.
Here is the bad page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Stuff</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
.cenx {text-align: center;}
.ceni {clear: both;}
.bxfix {margin: 0; border: none; padding: 0;}
.boxi {margin: 3em; border: solid 2px #0000cc;
padding: 1em; background-color: #ffaaaa;}
.boxd {margin: 0; border: none; padding: 0;
width: 50%; background-color: #aaffaa; float: left;}
.boxe {margin: 0; border: none; padding: 0;
width: 50%; background-color: #aaaaff; float: right;}
.celfil {margin: 0; border: 1px black solid;
padding: .25 em; background-color: #eeeeaa;
width: 100%; height: 100%;}
.wfl {width: 100%;}
img {margin: 0; border: none; padding: 0;}
body {background-color: #bbffbb; padding: 2%; font-family: sans-serif;}
</style>
</head>
<body>
<div class="boxi">
<div class="boxd">
<p>The text I want to keep on the left. The text I want to keep on the left.
The text I want to keep on the left. The text I want to keep on the left.
The text I want to keep on the left. The text I want to keep on the left.
The text I want to keep on the left. The text I want to keep on the left.
The text I want to keep on the left. The text I want to keep on the left.
The text I want to keep on the left. The text I want to keep on the left.</p>
</div>
<div class="boxe">
<table>
<tr>
<th><div class="celfil">Code number</div></th>
<th><div class="celfil">Replacement<br />Text</div></th>
</tr>
<tr>
<td>10</td><td>Text string number 1</td>
</tr>
<tr>
<td>20</td><td>Text string number 2</td>
</tr>
<tr>
<td>30</td><td>Text string number 3</td>
</tr>
<tr>
<td>40</td><td>Text string number 4</td>
</tr>
<tr>
<td>50</td><td>Text string number 5</td>
</tr>
<tr>
<td>60</td><td>Text string number 6</td>
</tr>
</table>
</div>
</div>
</body>
</html>
I took out the float: left; in the boxd style, and it got worse.
When I took the floats out of both boxd and boxe, it put the table under the text.
They certainly do not respond to the width and height styles correctly.
They certainly do!
See above. They do not.
I had divs inside of table cells to further format the contents. They never would expand beyond the size of the text they contained.
Your problem is very likely the use of tables.
Again, can you provide an example of the problem?
The table is a table of numbers and data.
See the example above. The yellow boxes are supposed to fill the table cells. They do not.
I had to use absolute measures {height: .75in; width: 1.5in;} to get the div to expand to the size of the containing table cell. 100% height and width did not work.
If you use absolute measures, the div cannot expand. Why would you expect it to?
I had to use the absolute measure to get it to expand to fill the container. It refused to expand to fit the container otherwise.
See the yellow boxes generated by the code above. They refuse to expand to fit the container.
It sounds as if you are using a table for non-tabular purposes; that's a recipe for disaster.
See for yourself (I replaced the proprietary data with simple text, but it is a numeric table).
It won't work. Every time I try to make what seems to be a straightforward structure from div tags, something goes blooey in the browser. and it falls apart: Either stuff leaks out of the div, or the object contained in the div is put elsewhere.
Example? My experience does not agree with yours. What are you doing wrong?
Run the code above to see it.
I made a simple div just to put a colored box with a border around some text and a table. The table refused to stay inside the div. Either the div got very small and stayed above the table containing the text, the table stuck out of the div on one side or the bottom, or the table dropped under the text. This was WITHOUT any size styles, other than that the table was to be 50 percent wide and aligned right. The div behaved as if only the text was inside it. The code validated with W3C.
Unsolved 
Offline 
