How to make text boxes keep their relative position as text is added to them?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Edward - 28 Jul 2006 12:34 GMT

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

Reply to this Message

Harlan Messinger - 28 Jul 2006 15:05 GMT

> I used to do this all the time in HTML-table layouting. How do I do
> this in CSS?

Could you use more specific terms than "keep their relative position"
and "stay relational to each other"? I have no idea what those mean.

Reply to this Message

Edward - 28 Jul 2006 15:56 GMT

I just want the CSS layout to work like simple HTML table layout (as in
my code example above): when you enter text into any box that is
stacked on top of another box, that box automatically moves down.

I guess I'm looking for some way to "anchor" a DIV to another DIV
(without INCLUDING it inside another DIV which causes the problems in
my above CSS code). Similar to how you anchor paragraph objects in VBA
for instance.

Thanks for your help!

Edward Tanguay
www.tanguay.info

> > I used to do this all the time in HTML-table layouting. How do I do
> > this in CSS?
>
> Could you use more specific terms than "keep their relative position"
> and "stay relational to each other"? I have no idea what those mean.

Reply to this Message

Harlan Messinger - 28 Jul 2006 18:46 GMT

[top-posting corrected]

>>> I used to do this all the time in HTML-table layouting. How do I do
>>> this in CSS?
[quoted text clipped - 8 lines]
> my above CSS code). Similar to how you anchor paragraph objects in VBA
> for instance.

If you could post your examples on-line I'll look at them, but going
only by your code it seems to me that your table-based examples are
simply two tables (and I don't see why you have two of them, since
they're built the same way), each table having two rows, each row having
one cell, with the cell in the lower row being center-aligned. In other
words, you have left justified text on top of centered text. Period.
Very straightforward.

When you switch to the DIVs, you have all kinds of padding and relative
positioning and inline-blocking, and I have no idea what it's for or
what you're expecting it to do. If you simply put one DIV on top of
another DIV, with a CSS text-align: center property set on the lower
DIV, you'll get more or less what you get with your table arrangements,
with the only difference being that they probably won't be the same
width unless you specify one.

Reply to this Message

Edward - 29 Jul 2006 16:53 GMT

> If you could post your examples on-line I'll look at them.

Here is a demonstration of what I mean:
http://www.tanguay.info/web/examples/stackedBoxesWithTables.htm

I'm in the process of converting 10 years of HTML-table-layout habits
into CSS-layout habits so bear with me.

Do most of you find that you have switched 100% from table-layout to
CSS or do you use a mix of both, or use each when appropriate?

Thanks,

Edward Tanguay
All my projects: http://www.tanguay.info

Reply to this Message

Chris F.A. Johnson - 29 Jul 2006 17:52 GMT

>> If you could post your examples on-line I'll look at them.
>
[quoted text clipped - 6 lines]
> Do most of you find that you have switched 100% from table-layout to
> CSS or do you use a mix of both, or use each when appropriate?

Is this what you want?

<http://cfaj.freeshell.org/testing/stackedBoxesWithDivs.html>

Signature

Chris F.A. Johnson, author <http://cfaj.freeshell.org>
Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
===== My code in this post, if any, assumes the POSIX locale
===== and is released under the GNU General Public Licence

Reply to this Message

Harlan Messinger - 30 Jul 2006 00:56 GMT

>> If you could post your examples on-line I'll look at them.
>
[quoted text clipped - 3 lines]
> I'm in the process of converting 10 years of HTML-table-layout habits
> into CSS-layout habits so bear with me.

Well, as I said, I don't see at all from the CSS you used what you were
*trying* to do, and what with all the padding and relative positioning
and everything I didn't feel inclined to analyze it. Instead, while
accepting that you have your reasons for absolutely positioning the
containing block, I reworked its contents from scratch and got the
results you seem to be expecting. Try:

<html>

    <head>
        <title>Block Layout Demo</title>

        <style type="text/css">
            .content {
                position: absolute;
                top: 100px;
                left: 100px;
                width:400px;
                z-index: 100;
                padding: 10px;
                overflow: visible;
            }

            .block {
                margin-bottom: 2px;
            }

            #block1 {
                text-align: left;
                background-color: lightblue;
            }

            #block2 {
                text-align: center;
                background-color: greenyellow;
            }
        </style>

    </head>

    <body>
        <div class="content">
            <div id="block1" class="block">YOU SEE? The bottom box starts to
creep up onto the top box, the white line already has disappeared. Also,
there is this unwanted margin at the bottom of this top box (padding is
actually 10x). <b>So the question is: How can I use CSS and DIVs so that
I get the same affect as I do with stacked table cells <a
href="stackedBoxesWithTables.htm">like this</a></b>?</div>
            <div id="block2" class="block">first line<br/>second line</div>
        </div>
    </body>

</html>

Reply to this Message

Chris F.A. Johnson - 28 Jul 2006 16:15 GMT

> I used to do this all the time in HTML-table layouting. How do I do
> this in CSS?
[quoted text clipped - 55 lines]
></style>
></head>

It's not clear what your problem is (or what you want), but
there's a good chance that it will be at least somewhat improved
if you remove the px styles altogether. Then, if you find you need
to specify widths, do it in ems or percentages instead.

><body>
><div class="content">
[quoted text clipped - 33 lines]
> Edward Tanguay
> www.tanguay.info

Signature

Reply to this Message

feed_sheep - 29 Jul 2006 18:35 GMT

> Here is the CSS that I have so far but the boxes do not keep their
> relative position as I add text to them:

I'm not totally sure what your need for the absolute pixel perfect
positioning is, but replacing your styles with the following seems to work
for me...

.content
{
position: absolute;
display:inline-block;
top: 100px;
left: 100px;
z-index: 100;
padding: 10px;
overflow: visible;
background-color:lightblue;
width:400px;
text-align:center;

}

.offsetted {
position: relative;
background-color:greenyellow;
left:-10px;
top: 32px;
width:420px;
border-top: 2px solid white;
}

David

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2006

How to make text boxes keep their relative position as text is added to them?