Help needed to align dynamic # of divs

[buddaman]

I'm trying to use divs to replace tables, so far so good.
However, I'm having trouble getting the subcontent blocks to align horizontally

Trouble is setting margins and widths as the number of divs will be dynamic (max 4)

Example:
<div content>
----------------------------------------------------
| block 1 | block 2 | block 3 | block 4 |
----------------------------------------------------
</div> // close content

I keep getting the blocks falling vertically instead of horizontally

I'm calculating width in a php script that determines how many blocks there will be.
Then using
[code]
<div class="subcontent1" style="width:'.$width.'%">
[/code]
for block 1 and
[code]
<div class="subcontent2" style="width: '.$width.'%; left:'.$margin.'%">
[/code]
for the remaining blocks. $margin is increased as $margin = $margin + $width
to move the remaining blocks over.

I feel I'm either missing something or overcomplicating it.

Please help

[code]
div.content {
      position: absolute;
      background-color: #fefefe;
      color: #000033;
      width: 100%;
      top:  178px;
      left: 0px;
      padding: 2px;
      font-weight: normal;
      overflow: auto;
      }

div.subcontent1 {
      text-align: center;
      background-color: #efefef;
      border-style: solid;
      border-color: #637184;
      border-width: 1px 1px 1px 1px;
      padding: 2px;
      position:absolute;
      left: 0;
      top: 0;
      }

div.subcontent2 {
      text-align: center;
      background-color: #efefef;
      border-style: solid;
      border-color: #637184;
      border-width: 1px 1px 1px 1px;
      padding: 2px;
      position:relative;
      top: 0;
      }
[/code]

[moberemk]

Do all the boxes have to automatically go the entire width? You're problem is that you're using a <div>, which is a block-type element. Block elements automatically go the full width, and they stack one on top of the other. To get them to work horizontally, just use a float: left; command once you have the width calculated. Alternatively, if you don't need to have them all be the right amount of width to fill the entire area automatically, just set their display value to display: inline;.
Looking back over you're code, I'd say that there is definitely a better way to do this. Just have a bunch of subcontent div's with a width of, say, 100px. Then set them all to float: left;, and they'll all just align nicely next to each other. Give them all the subcontent class, and make you're subcontent1 class a subcontent class with an additional ID value that will let you say that this is the current one you need to pay attention to.

[buddaman]

I think the reason I used <div>s is because I wanted their width to be adjusted based on number of blocks so they would be somewhat centered.

I've give float a try and let you know.

Thanks!

[buddaman]

Float was a better idea by far.

Also went with fixed widths on the subcontents and content to keep them from wrapping.
using padding and margins to center the subcontents within the content block

Thanks for the ideas!!