...

View Full Version : Text formatting



krycek
12-10-2002, 08:56 PM
I posted on this a few weeks ago, and I thought I had fixed it, however I haven't :( it only worked in IE in quirks mode :rolleyes:

It's very simple: I have some text like this:



column one column two column two column two
column two column two column two
column two column two column two
column two column two column two
column two column two column two


...that's what I WANT to happen. Instead, this is happening:



column one column two column two column two
column two column two column two
column two column two column two column two column
two column two column two column two column two


I have currently got column one set to float: left. I don't really want to set column two to float: right instead, unless I have to, because that will not degrade very well. I have tried a combination of things, like block/inline, setting width, etc. nothing works yet.

...any ideas, anyone?

Cheers :)

::] krycek [::

MrDoubtFire
12-10-2002, 09:43 PM
Why not use tables to format this? It would be pretty easy, from the looks of what you want.

MrDoubtFire

krycek
12-10-2002, 11:33 PM
very true... but I am trying to avoid using tables if possible :)

::] krycek [::

jkd
12-10-2002, 11:39 PM
Set both heights to 100%, or the same value.

MrDoubtFire
12-10-2002, 11:39 PM
You can get this to work with <div> tags:

<div id="leftcol" style="position:absolute; display:block;
background-color:red; width:200px; left:5px; top:5px;">
<p>Column One</p>
</div>

<div id="rightcol" style="position:absolute; display:block;
background-color:yellow; width:200px; right:5px; top:5px;">
<p style="align:left;">Column Two Column Two Column Two</p>
<p style="align:left;">Column Two Column Two Column Two</p>
</div>


Not sure about the degradable problems though. But, with a bit of work and positioning and working out sizes you can get it to display next to each other.

MrDoubtFire

krycek
12-11-2002, 01:19 AM
...thanks jkd, I never thought about the heights, really - I was just thinking about the widths. I must admit I was a bit sceptical that setting them to 100% would work... but it did! ...only in IE though :( still doesn;t do it properly in Mozilla.

I will continue tweaking it and see if I can get it right.

Just one other thing: if I set a background color, is it possible to make two divs that are next to each other, the same height? Or am I getting my hopes up. I do not think this is possible...?

::] krycek [::

jkd
12-11-2002, 01:28 AM
Put them both in the same box, and then set their heights to 100%.

krycek
12-11-2002, 01:36 AM
...well that's the thing... they ARE in a box... well, a <p> tag, anyway :confused:

Here's the code snippet:



<p>
<span class="column">
<span class="code2">size</span>
</span>
<span class="column_r">
An integer which determines the original <span class="code">length</span> of the <span class="code">array</span>. A size can only be specified if elements are not being added to the <span class="code">array</span> upon creation.
</span>
</p>
<p>
<span class="column">
<span class="code2">elementN</span>
</span>
<span class="column_r">
Any JavaScript value.
</span>
</p>


...and here are the CSS styles I am using for the elements in that snippet:



p {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
color: #000000;
margin: 4px 4px 4px 54px;
padding: 4px;
width: auto;
}
.column {
background-color: #FF0000;

padding: 0px 10px 0px 0px;
width: 150px;
height: 100%;
float: left;
display: block;
}
.column_r {
height: 100%;
display: block;
}
.code {
font-family: "Courier New", Courier, mono;
color: #66AA00;
}
.code2 {
font-family: "Courier New", Courier, mono;
font-style: italic;
}


I have simply pasted that from my current sheet, I know I shouldn't need display: block on the <p> tag but I wanted to make sure, plus I am going to use divs instead of spans but I haven't changed the code yet... hence the block on the spans too.

There is a red background on the first column so that I can see how big it is :)

Like I said, it works in IE but not Mozilla :(

::] krycek [::

krycek
12-11-2002, 05:02 PM
...this is still causing me grief :(

any ideas, anyone?

::] krycek [::

MrDoubtFire
12-11-2002, 05:12 PM
Hi krycek,

I took your code and to me, it looks the same in IE6, Mozilla1.2.1, and Netscape 7.0. It displays two red backgrounded blocks on the left (with "size" and "elementN" in the top and bottom blocks respectively). On the right of each block is the spiel in each .column_r span.

Is this not the right way it's supposed to be displayed, or am I not understanding something? Are you using the latest version of the browsers?

MrDoubtFire

krycek
12-11-2002, 06:33 PM
Hi Mr DoubtFire, thanks for testing it out. I am using Mozilla 1.2.1 and IE 6 SP1.

I am not sure if the result you got was what I am after, but this may help:



It's very simple: I have some text like this:



column one column two column two column two
column two column two column two
column two column two column two
column two column two column two
column two column two column two

...that's what I WANT to happen. Instead, this is happening:


column one column two column two column two
column two column two column two
column two column two column two column two column
two column two column two column two column two



i.e. what I mean is, by 'not working' it is wrapping, like it does on Mozilla for me. But in IE it does not wrap underneath the first column.

Note that screen res will play a part here, because for some reason the lines (if they are going to wrap back) will only wrap after two lines, like in my example above, if that makes sense. So make sure that there are at least 3 lines in the right hand column in order to see if it is bahaving properly or not.

My second question is, how big is the red area? On my setup, it is only present in the background of the lines that have actual text; i.e. the background does not stretch to the bottom of the column's container, meaning that the column itself cannot be stretching that far.

I am still wondering about how to get the bakground to stretch all the way down to the bottom of a container, so that two columns will be the same overall height no matter what 'inner' height (i.e. lines of text) they are.

...do you follow that? I can post another example if you wish.

Cheers for the help :)

::] krycek [::

krycek
12-12-2002, 01:57 AM
...no ideas then? :(

::] krycek [::

krycek
12-12-2002, 04:33 PM
well I guess this is just not possible then :(

::] krycek [::

krycek
12-12-2002, 11:18 PM
Well I am not going to give up on this, surely there is an answer somewhere. I have tried everyone's ideas and still nothing.

Mr Doubtfire, jkd, joh6nn, vladdy, beetle, any ideas???

::] krycek [::

Roy Sinclair
12-13-2002, 08:13 PM
I've been watching because I've been fighting the same problem, height: 100% ought to work but the browsers refuse to make it that tall if you float it left and if you don't float it they won't let you put other content to the right of it.

If I manage to figure it out I'll be sure to let you know.

krycek
12-13-2002, 09:40 PM
thanks, roy - at least I know that it's not just me :)

I have still had no luck on this :(

I can put as many columns as I want next to each other, but only if I specify their widths - and as I want the final column to be dynamic width, that is useless for me.

also I can do it by setting positioning to absolute, but again that causes problems in that the width has to be specified, plus others due to the positioning method so it is in fact worse.

you are correct in that the browsers should size the elements to fit their container, however I think that the W3C spec only let's that happen if the height of the container is set. I have managed to create fixed dimension columns etc. with ease, however that kind of defeats the object!

so it seems that it is just not possible to do this :( what a bummer, another thing the W3C (or perhaps the browser makers?) have mucked up :(

::] krycek [::

jkd
12-13-2002, 11:30 PM
floated objects don't have a specified height it appears. Makes sense too.

Depending on what you want to do, margins may be a suitable workaround.

krycek
12-14-2002, 12:19 AM
well, like it says at the start of this thread, I just want to do two things (which are essentially the same)

- make two or more side-by-side elements - the rightmost of which is dynamic in size - the same height as each other

- if that is not possible, at least make sure that the columns will not wrap back to the start of their container if column n is higher than column n-1.

it seems to me that this should not be as difficult as it is!

you are right jkd in that the margins can be set to ensure that the columns do not wrap, however I wanted to be able to have two styles, one of column that could be applied to any number of columns, and one of columnright that would be the last column.

it seems that I will have to create a style for each column, with the margins set for each. oh well!

plus, it still does not solve the problem of height: how to make sure that two elements that are next to each other are the same height :(

::] krycek [::



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum