Jump to content

Help needed to align dynamic # of divs


buddaman

Recommended Posts

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]
Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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!
Link to comment
Share on other sites

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!!
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.