Dynamic Table Columns

[JordanM]

Hi There,

 

I'm very new to PHP and i'm creating the website for my new home business. The HTML and most of the css i've managed to work myself through however, I hate the layout of my products page.

 

It's currently displaying like this

 

Price

Option 1

Option 2

 

I would like it it to display:

Price

Option 1 Option 2

 

If you have the time, it would be very much appreciated if you explained how to create the dynamic columns. Im very new to PHP and this is very very confusing.

 <?php if ($price) { ?>
	  <div class="price">
		<span class="text-price"><?php echo $text_price; ?></span>
		<?php if (!$special) { ?>
		<span class="price-new"><?php echo $price; ?></span>
		<?php } else { ?>
		<span class="price-new"><?php echo $special; ?></span><span class="price-old"><?php echo $price; ?></span> 
		<?php } ?>
		<?php if ($tax) { ?>
		<span class="price-tax"><?php echo $text_tax; ?> <?php echo $tax; ?></span>
		<?php } ?>
		<?php if ($points) { ?>
		<span class="reward"><small><?php echo $text_points; ?> <?php echo $points; ?></small></span>
		<?php } ?>
		<?php if ($discounts) { ?>
		<div class="discount">
		  <?php foreach ($discounts as $discount) { ?>
		  <?php echo sprintf($text_discount, $discount['quantity'], $discount['price']); ?><br />
		  <?php } ?>
		</div>
		<?php } ?>
	  </div>
	  <?php } ?>
	   <?php if ($profiles): ?>
      <div class="option">
          <h2><span class="required">*</span><?php echo $text_payment_profile ?></h2>
          <br />
          <select name="profile_id">
              <option value=""><?php echo $text_select; ?></option>
              <?php foreach ($profiles as $profile): ?>
              <option value="<?php echo $profile['profile_id'] ?>"><?php echo $profile['name'] ?></option>
              <?php endforeach; ?>
          </select>
          <br />
          <br />
          <span id="profile-description"></span>
          <br />
          <br />
      </div>
      <?php endif; ?>
	  <?php if ($options) { ?>
	  <div class="options">
		<h2><?php echo $text_option; ?></h2>
		<?php foreach ($options as $option) { ?>
		<?php if ($option['type'] == 'select') { ?>
		<div id="option-<?php echo $option['product_option_id']; ?>" class="option">
		  <label><?php if ($option['required']) { ?>
		  <span class="required">*</span>
		  <?php } ?>
		  <b><?php echo $option['name']; ?>:</b></label>
		  <select name="option[<?php echo $option['product_option_id']; ?>]">
			<option value=""><?php echo $text_select; ?></option>
			<?php foreach ($option['option_value'] as $option_value) { ?>
			<option value="<?php echo $option_value['product_option_value_id']; ?>"><?php echo $option_value['name']; ?>
			<?php if ($option_value['price']) { ?>
			(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
			<?php } ?>
			</option>
			<?php } ?>
		  </select>
		</div>
		<?php } ?>
		<?php if ($option['type'] == 'radio') { ?>
		<div id="option-<?php echo $option['product_option_id']; ?>" class="option">
			<label>
		  <?php if ($option['required']) { ?>
		  <span class="required">*</span>
		  <?php } ?>
		  <b><?php echo $option['name']; ?>:</b></label>
		  <?php foreach ($option['option_value'] as $option_value) { ?>
		  
		  <label class="radio" for="option-value-<?php echo $option_value['product_option_value_id']; ?>">
			  <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" id="option-value-<?php echo $option_value['product_option_value_id']; ?>" /><?php echo $option_value['name']; ?>
			<?php if ($option_value['price']) { ?>
			(<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
			<?php } ?>
		  </label>
		    <?php } ?>
		</div>

[hitman6003]

You can either put them into a table instead of a div, or set the css for the div to "float: left;"

 

Change:

 

<div class="options">

 

to:

 

<div class="options" style="float: left;">

And see if it does what you want.

[JordanM]

No because there are multiple options that propagate. E.g. Option 1 & Option 2 with multiple subitems

[Ch0cu3r]

By option do you mean the <select></select> menu's? Then hitmans solution is still right, except you want to to apply the option menus instead

 

As demonstrated here

http://jsfiddle.net/4fgW8/1/

[JordanM]

Maybe i'm misunderstanding this. I'm not hard coding in option 1 & option 2. In the system there are multiple options, i select the 2, 3 or 4 i want and it automatically propagates them from the coe above. The code for 2 or more options is the same so I can't apply floats to left or right.

[Ch0cu3r]

 Can you explain what it is you are trying to do, as I do not understand.