Jump to content


Photo

Help needed to align dynamic # of divs


  • Please log in to reply
3 replies to this topic

#1 buddaman

buddaman
  • Members
  • Pip
  • Newbie
  • 4 posts
  • LocationNorth Virginia

Posted 04 May 2006 - 04:31 PM

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
<div class="subcontent1" style="width:'.$width.'%">
for block 1 and
<div class="subcontent2" style="width: '.$width.'%; left:'.$margin.'%">
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

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;
      }


#2 moberemk

moberemk
  • Members
  • PipPipPip
  • Advanced Member
  • 695 posts

Posted 04 May 2006 - 08:46 PM

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.
Disclaimer: No matter how harsh I may be, I'm always IMO only.

#3 buddaman

buddaman
  • Members
  • Pip
  • Newbie
  • 4 posts
  • LocationNorth Virginia

Posted 05 May 2006 - 01:37 PM

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!

#4 buddaman

buddaman
  • Members
  • Pip
  • Newbie
  • 4 posts
  • LocationNorth Virginia

Posted 05 May 2006 - 02:38 PM

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!!




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users