IPB

Welcome Guest ( Log In | Register )



Tags
This content has not been tagged yet
2 Pages V   1 2 >  
Reply to this topicStart new topic

Word Wrap Text In Div.


kvarnerexpress
no avatar
Super Member
*********
Group: Members
Posts: 407
Joined: 13-December 04
Member No.: 2,696



Post #1 post Sep 13 2005, 07:47 PM
i use 2 div's for the page layout. One for navigation and one for the contents.

html Code:

Original - html Code:

CODE
   <div width="10%" style="position: absolute; left: 2%;"> bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb </div> <div width="86%" style="position: absolute; left: 14%;"> bbbb </div>


But now the b's wont stay within their div-element. I want lines that doesnt fit on one line within the divto wrap to the next line.

How can i do this?
Thanks,kvarnerexpress

Go to the top of the page
+Quote Post
Saint_Michael
no avatar
$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************
Group: [HOSTED]
Posts: 6,938
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew
myCENT:9.20



Post #2 post Sep 13 2005, 08:03 PM
CODE

<div style="position:absolute; top:20; left:20; width:300; height:300;></div>[/div]


you have to use the top in your div position in order to seperate it work with this set up and you will solve your issue.


[note=dundun2007]Edited as requested[/note]

This post has been edited by dundun2007: Sep 13 2005, 10:00 PM
Go to the top of the page
+Quote Post
Lozbo
no avatar
Super Member
*********
Group: Members
Posts: 282
Joined: 1-September 05
From: Wanatos
Member No.: 11,382



Post #3 post Sep 14 2005, 12:30 AM
I didnt actually understand what you were asking, but i think i can see what your trouble is, as you put so many 'b's together, the div is expanding itself to fit its content, but it would be different with normal words (words with less than 10 characters or whatever).

So i think that what st mike said wont do, i dont know if theres anyway to css that, like "white-space: nowrap", but upside down this property, becouse what i understood is that you want the text to actually WRAP.
Go to the top of the page
+Quote Post
Saint_Michael
no avatar
$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************
Group: [HOSTED]
Posts: 6,938
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew
myCENT:9.20



Post #4 post Sep 14 2005, 01:28 AM
no kvan is asking how to septerate the 2 tables if you notice the b's that are group together that look like doubles, thats what he is referring to.
Go to the top of the page
+Quote Post
snlildude87
no avatar
Moderator
***************
Group: Members
Posts: 2,325
Joined: 8-March 05
From: Mawson, Antarctica
Member No.: 4,254



Post #5 post Sep 14 2005, 01:35 AM
No, Michael. Lozbo is right. I've had this trouble when coding templates. If you use a really long word, then I suggest just using the wordwrap function in PHP to break it down. Like Lozbo said, if you're typing normally, then your word should wrap, and you will be fine. Long words are what usually break layout anyway, and there is really no way to fix this (I may be wrong, so you CSS gurus correct me if I am).
Go to the top of the page
+Quote Post
Saint_Michael
no avatar
$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************
Group: [HOSTED]
Posts: 6,938
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew
myCENT:9.20



Post #6 post Sep 14 2005, 02:11 AM
ok then if that is the case then all you would have to do is sperate the text using a <br> or <p> tag then, cuz i just now tried different settings with width and height and i got nothing.

but with css that geared more towards tables then <div> tags, but if you put the <div> tag within the table then it should word wrap with in the table its self.
Go to the top of the page
+Quote Post
Tyssen
no avatar
***********
Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818



Post #7 post Sep 14 2005, 05:18 AM
QUOTE(Saint_Michael @ Sep 14 2005, 12:11 PM)
but with css that geared more towards tables then <div> tags, but if you put the <div> tag within the table then it should word wrap with in the table its self.

CSS geared towards tables? Where'd you get that from? blink.gif
And if you're using CSS, why would you enclose your div within a table?
Even if you were using tables, if a word is too long, like snlildude87 says, it's gonna stretch the width of the table cell regardless of whether you've set a width or not.
Go to the top of the page
+Quote Post
Lozbo
no avatar
Super Member
*********
Group: Members
Posts: 282
Joined: 1-September 05
From: Wanatos
Member No.: 11,382



Post #8 post Sep 14 2005, 05:22 AM
QUOTE(snlildude87 @ Sep 13 2005, 07:35 PM)
If you use a really long word, then I suggest just using the wordwrap function in PHP to break it down.
[right][snapback]185780[/snapback][/right]

How's that wordwrap function from php?

So i have also been trying to hack that out but didnot know how to do it.

Michael i think that <br /> or <p> wont do what kvar seeks, becouse that would make the layout always break, not when the browser resizes.
Go to the top of the page
+Quote Post
littleweseth
no avatar
Member [Level 2]
*****
Group: Members
Posts: 85
Joined: 27-August 05
From: QLD, Aus. G'day!
Member No.: 11,186



Post #9 post Sep 16 2005, 06:24 AM
If you don't mind using a scrollbar, you can apply the following style :
CODE

#longlines {
clip : auto;
overflow : scroll;
}


Anything that doesn't fit will automagically make it's parent box scrollable. Of course, if this is your content box, this will be a sonna sam for your users (scroll to bottom of page, move across, move back up, go back down, go across....), but if you're only enclosing small samples it should be fine.
Go to the top of the page
+Quote Post
Lozbo
no avatar
Super Member
*********
Group: Members
Posts: 282
Joined: 1-September 05
From: Wanatos
Member No.: 11,382



Post #10 post Sep 17 2005, 07:22 PM
hey little weseth, about this issue of making its parent box scrollable, i havent been able to make a td scrollable, i think i heard it was not possible, is it? only thing i can figure out to get pass this is by adding a div inside the cell, but i dont know if theres anyother way...
Go to the top of the page
+Quote Post

2 Pages V   1 2 >
Reply to this topicStart new topic

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   4 noxit 591 19th June 2004 - 05:45 PM
Last post by: OpaQue
No New Posts   3 Plenoptic 578 17th July 2006 - 12:06 PM
Last post by: Plenoptic
No New Posts   6 Dagoth Nereviar 1,161 11th March 2007 - 11:38 PM
Last post by: jlhaslip
No New Posts   4 electriic ink 629 25th July 2006 - 07:28 PM
Last post by: electriic ink
No New Posts   7 -Cooper_NFFC- 521 11th October 2004 - 05:52 AM
Last post by: ashiezai
No New Posts   4 hansley 460 6th November 2004 - 11:03 PM
Last post by: ronin
No new   39 Jeremie 3,448 9th July 2005 - 06:30 AM
Last post by: Joshua
No new   19 twoq 2,112 23rd October 2005 - 07:03 PM
Last post by: xaetos
No New Posts 5 delivi 465 11th July 2006 - 09:39 AM
Last post by: trace-uk
No New Posts   1 Vikash 659 25th November 2004 - 04:29 PM
Last post by: serverph
No New Posts   5 mirage 1,884 14th November 2005 - 12:54 AM
Last post by: azoundria
No New Posts   2 lloydg 1,205 5th August 2007 - 09:55 PM
Last post by: dre
No New Posts   8 kvarnerexpress 1,046 19th October 2005 - 01:00 AM
Last post by: dul
No New Posts   0