Wrapping text within columns

Sabine / 2010-01-25 21:20:30   

Hi all
Ive managed to get three columns working and can see the < p >< / p > code contains the text within the column width, but looses the page styling, anyone got any ideas how to contain text within the column and keep the style?
You can see my page here:
Webpage

Thanks

lemathieu A / 2010-01-25 21:24:08   

Have a look here.

Sabine / 2010-01-26 13:33:17   

Thanks lemathieu
I still have the same problem, the text doesn't wrap until I add < p> underneath the each column of text, shown on my page are the two examples.
Coulmn one I have added the tag < p> under the text, and it looses the page styling, column 2 and 3 are as per the page you suggested but the text doesn't wrap in the column width.

Thanks for your help this far.

rickykappa / 2010-01-26 13:57:35   

Sabine, I don't want to contraddict lemathieu, but you asked the same question in another thread. if you didn't see my answer there, maybe it's of some help

Sabine / 2010-01-27 20:25:52   

Thanks for posting that Ricky.
I thought I canceled that post before it went up.

I put the code .col_3 { width: 200px; } into my css file. Is there a particular line for this?

I Added < div class="col_3"> to the top of the code for the page, is this th right place, and added < p>< /p> to the base of the column but still I either get the text running in a continuous line or wrapping but loosing the styling.

Apologies, but Im fairly new to coding.

rickykappa / 2010-01-28 13:47:25   

ok, I'm back now. no apologies, nobody was born with knowledge!
take a look at thehtml code of your page.
first thing is: you have different width values for the 3 columns (#1=200px - #2&3=230px), but maybe that's how you want it?
second: those values are applied to the text therein, and it works well, unless there is no < p> tag with text contained, which is exactly what happens (only)in your 2nd column.
either you avoid every text wrapped into < p> tags or you manage to rule them
third: the reason for this behaviour of the < p> tag is there in your css code, #content p { width: 700px;... }

solution A, you can change the last value in your css as you like, but be aware that it will affect every < p> tag you'll ever have in the #content, or
solution B, you can mantain a different behaviour for the < p> tag contained into the < div> which make your column, marking those with a class, like that:
< div class='col_3' style='float: left; style='width: 230px; margin-right: 30px;'>
actually I'd rather transfer the whole style directly into the stylesheet:
.col_3 { width: 200px; float: left; margin-right: 30px; }
, leaving the code to type in the text area just like that
< div class='col_3'>

in both cases (A or B) remember to erase the < div class="col_3"> to the top of the code for the page, and the related < /div> if you have added it too.

joaosousa / 2010-02-23 13:09:01   

hello

I wanted to apply columns to my content area but I was wondering if it is possible to do it on the style sheets instead of having to do each time we want to insert content on indexhibit.

Anyone can help me?

rickykappa / 2010-02-23 15:29:41   

if you're able to do that only with css, please come back with the solution!
unluckily I don't think is possible...
;-)

Jamiew / 2010-02-23 19:31:15   

This might be worth a look:

http://www.w3.org/TR/css3-multicol/

Only for some of the newer browsers but will degrade gracefully for the older ones (ie. will simply revert back to one column - no harm done!)

This thread has been closed, thank you.