Table-free layout troubles

[EdgeWalker]

I know that image/content positioning is a common topic in this forum, particularly when it involves the kind of layout that one might have to resist the urge to use tables for. I can't find anything that applies to my problem, though, so here it is:

I just want to be able to divide one <div> into an arbitrary number of areas that will hold text or images. I can get the positioning right by using float, but that puts the content behind the background.

Here's what I'm trying, basically, with all critical css areas empty, because clearly what I had there wasn't working:

#center_content {
position: relative;
top:50px;
background:url(images/green_stars.jpg) no-repeat left top;
margin-left:209px;
margin-right:209px;
margin-bottom:75px;
}

div.container{
??? tried using clear: among other things. nothing worked correctly
}

div.segment{
??? tried using float, but that put the contents BEHIND the background. Tried using display:inline; - that had no effect...
}



The HTML in question:

<div id="center_content">
<p>Some text</p>
<div class="split">

<div class="segment">
<img src="XXX.jpg" alt="XXX"/>
</div>

<div class="segment">
<p>Placeholder text</p>
</div>

</div>
</div>

[snow]

Could you post up a link for this page please?

[EdgeWalker]

No. Unfortunately, it's a progressing commercial website with proprietary information that I do not have permission to post anywhere right now. The site already has the behavior I want, but it's not using CSS to do it - it's using tables. I could go back through and fill everything in with fake graphics and text, but that would be pretty inefficient. Instead, I might try to find a way to simplify/clarify my question. The issue is very general, anyway - it shouldn't matter WHAT I put in the "segment" divs, because the idea is to have an arbitrarily long series of wrapping "boxes" where making a new "container" forces a new row. Is that unclear? I can make a mock-up if it's really necessary.

This is what it looks like now:

CSS----------------------------------
div.container {
display:block;
float:left;
}

div.segment {
clear:none;
float:left;
position:relative;
width:350px; /* This could be any size, 350 is just my starting-point*/
}
-----------------------------
HTML:

<div class="container">

<div class="segment">Content, such as an image or text.</div>

<div class="segment">Content, such as an image or text.</div>

<div class="segment">Content, such as an image or text.</div>
</div>

This would create a container with 3 segments that wrap as the window changes size. You could put any number of segments in - used to hold things like thumbnail images. It still doesn't work right though. Putting in consecutive container divs doesn't make rows - they just continue to line up on the same row.

O/T: I don't know what made me decide to suddenly change all of my layout practices to CSS (other than that it's a prudent, efficient, logical web standard.) Unfortunately these first few days have been rather rough.

[Lchad]

It would seem to me that unless you declare a "width" for your container it will continue to expand and expand.

[snow]

Oh! Do you want each segment to be on seperate lines? (Having difficulty understanding the problem sorry...)

[EdgeWalker]

Well, yes, I want the container to be able to expand without bound, but if I put it inside a <div> with limited dimensions, won't it inherit those boundaries? I'll cross that bridge when I come to it, though- What I really want the segments to do is float, so that they will just wrap around when they reach the edge of the container, but when I try this, it causes them to go back behind the background. If I want to *force* in a new row, I'll just make a new container.

I have been poring over CSS literature for a couple of days, and though I can now almost everything I need to, this particular problem still eludes me.

(Forgive my repellently n00b problem, please, but I need to get off of this drug we call <table>, and I'm no longer concerned about revealing my ignorance.)

[EdgeWalker]

Since I can't put up the site itself, would it help if I created an illustration that shows what I am trying to do?