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

Edward

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="#eeeee e" 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="#eeeee e" 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="offsette d">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

Subscribe Reply

3361

Harlan Messinger

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

Edward

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

Chris F.A. Johnson

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="#eeeee e" 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="#eeeee e" 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="offsette d">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

Harlan Messinger

[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

Edward

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

Chris F.A. Johnson

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/stackedBoxesWit hDivs.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

feed_sheep

"Edward" <ed****@tanguay .infowrote in message
news:11******** **************@ m73g2000cwd.goo glegroups.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:greenyell ow;
left:-10px;
top: 32px;
width:420px;
border-top: 2px solid white;
}

David

Jul 29 '06 #8

Harlan Messinger

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">Y OU 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="stackedBo xesWithTables.h tm">like this</a></b>?</div>
<div id="block2" class="block">f irst line<br/>second line</div>
</div>
</body>

</html>

Jul 29 '06 #9

Similar topics

4332

slide menu how to make it relative to table

by: ajay | last post by:

I have following code for a slide menu but i twiked it to work for a single level menu. Open it in a Browser to get a clear picture. I have 2 Qs 1) How to make first entry as non-link. i.e i want to make first text as Table Heading/menu category. For examle in the given menu i want to make a heading as "Comp. Languages" which won't be a link. 2) The position of this menu is absolute to the page. I want to make it absolute to the Table...

HTML / CSS

1801

A question about the exact position of positioned boxes

by: Luigi | last post by:

Hi, even if I have read more and more about the argoment (also in the W3C site), I still can't exactly position my boxes on the pages. I would to know what is the EXACT displacement between an outer box and an inner box (placed with the "position:absolute" property and the "top" and "left" values). Trust me: the W3C site doesn't explain this in details. It just gives

HTML / CSS

22659

DIV text vertical-align solution

by: smr78 | last post by:

Hi, Up to now, I didn't find a solution to align text in the middle of a inline neither block box in the vertical direction. That's because the vertical-align property is not active for many boxes. And when it is, not all the browsers folow it. I think there is a general solution in surrounding the box with another box, using the top property and fixing the top position at the middle of the surrounding box minus the half height of the box...

HTML / CSS

2902

Wrapped text doesn't properly flow round floated div in IE6

by: sweep | last post by:

Hi there, I have a problem with some CSS I'm writing and I was looking for a little help. I have a nav bar at the top and left side of my page in CSS which work fine. The remaining space has a div which I'm using for body text. Floated to the right of this are two image boxes and a broken out quotation from the page (this box is wider than the images). The layout is working, except that the text in the main section doesn't seem to wrap...

HTML / CSS

3738

text not wrapping around image floated right

by: edski | last post by:

Using a technique I found here: http://www.vertexwerks.com/tests/sidebox/ I created these "dialogue" boxes: http://www.ebph.org/test.htm In IE6, the text does not wrap correctly around the image, which is floated right. Any ideas / suggestions?

HTML / CSS

2104

Problem with menu text dissapearing!

by: george.leithead | last post by:

Hi all, I have a very strange problem! In following Web page (which is generated from a CMS System), the navigation to the left 'dissapears' when you roll the mouse over the links? It does not do this in all browsers either. I have found it to happen in IE 7 and the latest patched IE 6. I have tried to find out the reason, but keep finding strange behaviour! You will see at the bottom of the HTML, I have a comment. If you follow...

HTML / CSS

2445

a method to make js have the ability to inherit

by: zzw8206262001 | last post by:

Hi,I find a way to make javescript more like c++ or pyhon There is the sample code: function Father(self) //every contructor may have "self" argument { self=self?self:this; //every class may have this statement self.hello = function() {

Javascript

2022

prinicpal block boxes (css 2.1)

by: dave8421 | last post by:

Hi, I'm a bit confused about the definition about "Prinicpal Block Boxes" in CSS 2.1 draft specification. ( http://www.w3.org/TR/2006/WD-CSS21-20061106 ) <pre> 9.2.1 Block-level elements and block boxes The principal block box establishes the containing block for descendant boxes and generated

HTML / CSS

2716

CSS text alignment question

by: Matthew | last post by:

Hi, I'm mainly a coder, PHP at the moment, but from time to time need to design and use some css. I've a css text alignment issue. Mostly to align text neatly in the past I've used tables. But now I know I should be getting into the 21st C and using css properly. Here are 2 mock up pages with some forms on them, obviously I want the

HTML / CSS

9404

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10164

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

10007

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

9835

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

8833

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

5277

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

5423

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

3926

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

2806

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General