468,456 Members | 1,745 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,456 developers. It's quick & easy.

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

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

Jul 28 '06 #1
8 3128
Edward wrote:
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.
Jul 28 '06 #2
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

Harlan Messinger wrote:
Edward wrote:
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.
Jul 28 '06 #3
On 2006-07-28, Edward wrote:
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>
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">
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

--
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
Jul 28 '06 #4
[top-posting corrected]

Edward wrote:
Harlan Messinger wrote:
>Edward wrote:
>>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.
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.
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.
Jul 28 '06 #5
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...WithTables.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

Jul 29 '06 #6
On 2006-07-29, Edward wrote:
>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...WithTables.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?
Is this what you want?

<http://cfaj.freeshell.org/testing/stackedBoxesWithDivs.html>
--
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
Jul 29 '06 #7
"Edward" <ed****@tanguay.infowrote in message
news:11**********************@m73g2000cwd.googlegr oups.com...
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
Jul 29 '06 #8
Edward wrote:
>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...WithTables.htm

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>
Jul 29 '06 #9

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by smr78 | last post: by
2 posts views Thread by george.leithead | last post: by
19 posts views Thread by zzw8206262001 | last post: by
6 posts views Thread by dave8421 | last post: by
15 posts views Thread by Matthew | last post: by
1 post views Thread by subhajit12345 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.