I need some CSS Support Options

[Medi]

How do you style text to be like newspaper style? Here's what I mean (photoshopped)



all within the same div (because I only want one scrollbar)

[fixtatik]

within the same div without using separate divs inside is somewhat possible, but it's a little bit of an ugly result.

CODE

<style type="text/css">
div { height:300px; margin:0 auto; overflow:auto; width:500px; }
p { float:left; margin:10px; width:210px; }
</style>

<div>
  <p>text</p>
</div>

it unfortunately won't look exactly like a newspaper column, as each paragraph will be next to one another, rather than going down, then starting a new column.

the issue is because if you have the text within a scrolling div, the browser won't know when to start a new column, unless you use divs nested within divs, like this:

CODE

<style type="text/css">
.main { height:300px; margin:0 auto; overflow:auto; width:500px; }
.column { float:left; height:600px; margin:10px; width:210px; }
</style>

<div class="main">
  <div class="column">
    <p>text</p>
  </div>
  <div class="column">
    <p>text</p>
  </div>
</div>

of course, you'd just have to change the heights and widths to what you're looking for.

edit: if this wasn't for myspace, you could write a PHP script (or any script) that counts the number of characters or words in one column, then starts a new one. you can also do columns in CSS 3, if everyone who visits your profile uses a browser that supports CSS 3.

[PeRRiiN]

profile 1.0 or 2.0?

[Medi]

profile 1.0 or 2.0?

1.0 friend. Not ready to tackle 2.0 yet.

Thanks for the help Gregg, I'll see if that works for what I'm trying to do.

[Mickey]

Can't you construct two tables next to each other inside a DIV or something?

[Medi]

Can't you construct two tables next to each other inside a DIV or something?

Thank you mike. I forgot all about tables. I'll see which method works best.

[PeRRiiN]

you can also use divs.
Use padding so that they won't look really crunched together.
You should style the first div with float:left; along with more properties to fit your needs.