I used to do this all the time in HTML-table layouting. How do I do
this in CSS?
--------------------------------------------------
<table width="400px">
<tr>
<td bgcolor="beige">one line of text</td>
</tr>
<tr>
<td bgcolor="#eeeeee" align="center">this is another line of
text</td>
</tr>
</table>
<hr/>
<table width="400px">
<tr>
<td bgcolor="beige">here you can see that the bottom menu moves down
as we add text to this TABLE CELL </td>
</tr>
<tr>
<td bgcolor="#eeeeee" align="center">either table cell can contain
as much text as possible and they both expand as needed AND stay
relational to each other, this is what I want to do with pure CSS
layout, how do I do it?</td>
</tr>
</table>
--------------------------------------------------
Here is the CSS that I have so far but the boxes do not keep their
relative position as I add text to them:
--------------------------------------------------
<html>
<head>
<style type="text/css">
..content
{
position: absolute;
display:inline-block;
background-color:beige;
top: 100px;
left: 100px;
width:400px;
z-index: 100;
padding: 10px;
overflow: visible;
}
..offsetted {
position: relative;
background-color:#eeeeee;
left:-10px;
top: 92px;
width:420px;
align:center:
}
</style>
</head>
<body>
<div class="content">
This is a lot of text that will increase the size of the box as it
increases AND the bottom box will move down as well, so far so
good.This is a lot of text that will increase the size of the box as it
increases AND the bottom box will move down as well, so far so
good.This is a lot of text that will increase the size of the box as it
increases AND the bottom box will move down as well, so far so
good.This is a lot of text that will increase the size of the box as it
increases AND the bottom box will move down as well, so far so good.
<div class="offsetted">but the more text you put in this bottom box,
the more the relational position between the tables goes bad, try to
put a WHOLE bunch of text in this box and it will begin to creep over
the upper box and cover up the white space between them. but the more
text you put in this bottom box, the more the relational position
between the tables goes bad, try to put a WHOLE bunch of text in this
box and it will begin to creep over the upper box and cover up the
white space between them. but the more text you put in this bottom box,
the more the relational position between the tables goes bad, try to
put a WHOLE bunch of text in this box and it will begin to creep over
the upper box and cover up the white space between them. but the more
text you put in this bottom box, the more the relational position
between the tables goes bad, try to put a WHOLE bunch of text in this
box and it will begin to creep over the upper box and cover up the
white space between them. </div>
</div>
</body>
</html>
---------------------------------------------------------
Thanks,
Edward Tanguay
www.tanguay.info
