CSS text placement and dynamic content

how to handle dynamic content

[GrannyKlump]

i'm a CSS newb so please bare with me.

i'm using div tags with content that is pulled from a DB. this content may change...it could be less content or more content. how could i handle this using CSS. we want to be able to place objects on the page where ever
we want but went want those objects to be able to expand and contract based on the content. any ideas?

thanks
GK

[SuzyUK]

Hi GrannyKlump - Welcome to WebmasterWorld

do you do this already? (I mean populate a page with data fom a database).. if so I take it that you do so into HTML elements like a <table>?

CSS is a design/styling language not a scripting language so you would not do your programming any differently and can still use whatever elements you choose, and if it is a table you can then use CSS to style it/them, or, if you want to use less/no tables, then the programming remains the same but just use other HTML elements.

A table is after all is just an HTML element, like all the others which can then be styled using CSS. This one took me a while to catch onto, but I found CSS'ing a table easier when I realised that it was just a structure built of nested HTML elements..

<table> ==== <div>
..<tr> ====== ..<div>
....<td> ====== ....<div>
....</td> ===== ....</div>
..</tr> ===== .. </div>
</table> === </div>

note that "div" here is just a generic HTML element the <td>'s for example could equate to a <p>

as for the it "could be less could be more" all elements will stretch to their content by default, so don't worry.

Good Luck, and let us know if this does/doesn't answer your question..

Suzy

PS: you might like to browse the CSS Library [webmasterworld.com] sometime, I know I found it useful..

[GrannyKlump]

we currently pull content from a DB to populate HTML pages with content. we are just a little concerned that if we specified a box in CSS with specific X Y values and the content streched the box that it would overlap other areas.

is that a valid concern?

Thanks
GK

[SuzyUK]

with specific X Y values and the content streched the box that it would overlap other areas.

is that a valid concern?

Yes, it is a valid concern.. (my concern being that CSS-P is not a cure-all solution, but then neither is anything else I've come across)

Q. why use specific "x y" values on anything but a container div/element?.. if you're feeding in content you know will be varying then "let it flow naturally" why constrain the entire "box"

Suzy

[bobjunga]

*yes we can*
You can difinately do a fluid layout (expand gracefully to fit different size content) with css-p. However, there are a few frustrating limitations wrt getting the heights of ajacent divs to match up so often it pays to throw in a simple one row table to get good results without spending all week. css-p and tables go well together. Some see it as a challenge to not use tables, but there is little practical reason to expend the effort.

*div's are like td's*
With css the basic unit of area is a div as opposed to a table cell (td). div's can grow much like td's -- generally the width specified by you or it defaults to the with of the container that its in and then the height grows down to fit the content.

*div's are not like td's*
A table row will assume the height of the tallest cell and so all the cells on that row will have the same height. There is no way to match up the heights of adjacent divs unless you fix them to a specific height.

*it takes about a week*
When you read about float:left clear:both and relative positioing and how the default top and left values of abosolute positioning put the div where it would be in the flow, you will think that you can get a horizontal row of divs to act like a table row of cells. However after about a week, you will realize that you can not.

*overflow -- cool*
You can fix the size of a div and give it 'overflow:scroll¦auto'. If the content is too big to fit, it can scroll.

--BobG