buddaman Posted May 4, 2006 Share Posted May 4, 2006 I'm trying to use divs to replace tables, so far so good.However, I'm having trouble getting the subcontent blocks to align horizontallyTrouble 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 contentI keep getting the blocks falling vertically instead of horizontallyI'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 + $widthto 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] Quote Link to comment Share on other sites More sharing options...
moberemk Posted May 4, 2006 Share Posted May 4, 2006 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. Quote Link to comment Share on other sites More sharing options...
buddaman Posted May 5, 2006 Author Share Posted May 5, 2006 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! Quote Link to comment Share on other sites More sharing options...
buddaman Posted May 5, 2006 Author Share Posted May 5, 2006 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 blockThanks for the ideas!! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.