Avatar of Debra11
Debra11
 asked on

Wrapping dynamic text in a div

I'm working in DreamWeaver, I've created a dynamic database field - it woks just fine, except I can't get the text to wrap.  I've tried giving it a width, no width, auto width - bascially every configuration within DreamWeaver.  I need two columns. (Pulling from two different tables within the same database.)  Here is the code: (CSS follows)

 <div class="divProc" id="OpSetup">
    <?php do { ?>
    <input <?php if (!(strcmp($row_rsOpSetup['Complete'],"Yes"))) {echo "checked=\"checked\"";} ?> type="checkbox" name="checkbox" id="checkbox"> <?php echo $row_rsOpSetup['Description']; ?>
     
    <?php } while ($row_rsOpSetup = mysql_fetch_assoc($rsOpSetup)); ?>
  </div>
  <div class="divProc2" id="PostResin">
    <?php do { ?>
      <input <?php if (!(strcmp($row_rsPostResin['Complete'],"Yes"))) {echo "checked=\"checked\"";} ?> name="CheckboxResin" type="checkbox" value=""> <?php echo $row_rsPostResin['Description']; ?>
      
      <?php } while ($row_rsPostResin = mysql_fetch_assoc($rsPostResin)); ?>
  </div>  
 
Here is the CSS:

.divProc {
      width: auto;
      display: marker;
      white-space: pre;
      height: 1100px;
      float: left;
}
.divProc2 {
      width: auto;
      white-space: pre;
      display: list-item;
      height: 1100px;
}

Here is the page ;  http://www.streamdent.com/PostResin.php
CSSAdobe Dreamweaver

Avatar of undefined
Last Comment
Rouchie

8/22/2022 - Mon
quincydude

like this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html><head> 
 
 
<title>Posterior Resin</title> 
<META name="Description" content="StreamDent - The Foolproof System for Eliminating Stress in the Dental Practice."> 
<META name="KeyWords" content="Dental Office Management, Dental Software"> 
 
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<META HTTP-EQUIV="imagetoolbar" CONTENT="no"> 
 
 
<style>
BODY { scrollbar-base-color: #999999; }
 
 
 
 /* LINK COLORS */
 
a:link		{ color: #3300CC; text-decoration: none; }
 
a:visited	{ color: #3300CC; text-decoration: none; }
 
a:active	{ color: #3300CC; text-decoration: none; }
 
a:hover		{ color: #3300CC; text-decoration: underline; }
 
 
 
 
 /* THE NEXT LINE CONTROLS THE FONT SIZE FOR ALL PAGES */
 
TABLE 		{ COLOR: #000000; FONT: 12px verdana, arial, sans-serif; font-weight: normal }
 
 
.title 		{ color: #000000; font: 15px verdana, arial, sans-serif; font-weight: bold }
 
 
.smalltitle 	{ COLOR: #000000; FONT: 12px verdana, arial, sans-serif; font-weight: bold }
 
 
.picturetitle 	{ COLOR: #000000; FONT: 10px verdana, arial, sans-serif; font-weight: bold }
 
 
.phonetitle 	{ color: #0033CC; font: 11px verdana, arial, sans-serif; font-weight: bold }
 
 
.price 		{ COLOR: #FF6600; FONT: 11px verdana, arial, sans-serif; font-weight: bold }
 
 
.footertext 	{ COLOR: #999999; FONT: 10px arial, verdana, sans-serif; font-weight: bold }
 
 
.just 		{text-align: justify;}
 
 
 
 
 /* CODE FOR GALLERY PAGES */
 
 
.spacer_thumb		{ width: 123px;
			  height: 17px; }
 
.spacer_small		{ width: 128px;
			  height: 13px; }
 
 
#ZOOM 		{ LEFT: 10px; POSITION: absolute; TOP: 31px;z-index:10; }
 
 
 
 /* IMAGE BORDERS */
 
 
 
.borders		{
	border:1px solid #000000;
}
			 A:hover, A:active {color: #3366FF}
			 A:hover .borders, A:active .borders {
	border:thin solid #0000FF;
}
 
.popup-borders		{ border: 1px solid #000000; }
 
 
.button-popups { background-image: url("picts/button-popups.gif");
		background-color:#FFFFFF;
		FONT-FAMILY: arial, verdana, helvetica, sans;
		color: #000000;
		font-size: 8pt;
		height: 21px;
		cursor:hand;
		font-weight: bold;
		text-align: center;
		padding-left: 5px;
		padding-right: 5px;
		width: 100%;
		margin:2px;
		BORDER: #000000 1px solid; }
 
 
.buttonon-popups { background-image: url("picts/buttonon-popups.gif");
		background-color:#DBE7F4;
		FONT-FAMILY: arial, verdana, helvetica, sans;
		color: #0000FF;
		font-size: 8pt;
		height: 21px;
		cursor:hand;
		font-weight: bold;
		text-align: center;
		padding-left: 5px;
		padding-right: 5px;
		width: 100%;
		margin:2px;
		BORDER: #0000FF 1px solid; }
 
 
 
 
 
 /* HIDE MENU AND ITEMS FOR PRINTING */
 
 
@media print {
.printhide 	{ display:none; }
.printhelp	{ width:600px; }
}
@media screen{
.printonly 	{ display:none; }
}
 
 
 
 
 
 /* CONTACT PAGE CODE */
 
.shadeform	{ FONT: 13px arial, verdana, sans-serif;
		background-image: url("picts/shadeform.gif");
		text-align: left;
		WIDTH: 200PX;
		BORDER: #000000 1px solid; }
 
.textarea	{ FONT: 13px arial, verdana, sans-serif;
		background-image: url("picts/shadeform.gif");
		text-align: left;
		WIDTH: 250PX;
		HEIGHT: 100PX;
		BORDER: #000000 1px solid; }
 
.dropdown {	COLOR: #333333;
		WIDTH: 200PX;
		FONT: 11px verdana, arial, sans-serif; }
 
.button { 	background-image: url("picts/button.gif");
		background-color:#FFFFFF;
		FONT-FAMILY: arial, verdana, helvetica, sans;
		color: #000000;
		font-size: 8pt;
		height: 21px;
		width: 110px;
		cursor:hand;
		font-weight: bold;
		text-align: center;
		BORDER: #000000 1px solid; }
 
.buttonon { background-image: url("picts/buttonon.gif");
		background-color:#DBE7F4;
		FONT-FAMILY: arial, verdana, helvetica, sans;
		color: #0000FF;
		font-size: 8pt;
		height: 21px;
		width: 110px;
		cursor:hand;
		font-weight: bold;
		text-align: center;
		BORDER: #0000FF 1px solid; }
 
 
 
 /* POSITION OF THE PICTURE ON ALL NON-GALLERY PAGES */
 
#pictures 	{ LEFT: 10px; POSITION: absolute; TOP: 15px;  }
 
 
 
 /* CODE FOR LINKS PAGE */
 
 
.searchbutton { background-image: url("picts/button.gif");
		background-color:#FFFFFF;
		FONT-FAMILY: arial, verdana, helvetica, sans;
		color: #336699;
		font-size: 8pt;
		height: 21px;
		cursor:hand;
		font-weight: bold;
		text-align: center;
		BORDER: #336699 1px solid }
 
 
 
.searchform {	WIDTH: 125PX;
		HEIGHT: 20PX;
		background-color:#FFFFFF;
		COLOR: #333333;
		background-image: url("picts/shadeform.gif");
		FONT: 13px arial, verdana, sans-serif;
		BORDER: #666666 1px solid }
 
 
 
.searchdrop 	{font-size: 8pt;
		WIDTH: 60PX;
		HEIGHT: 20PX;
		FONT-FAMILY: arial, verdana, helvetica, sans;
		background-color:#FFFFFF;
		COLOR: #000000; }
 
 
 
 /* CODE FOR THE MAP PAGE */
 
 
 
.divstyle {
	position:absolute;
	width:25px;
	BORDER: #000000 0px solid;
	left: 700px;
	top: 333px;
}
 
.pstyletitle{	position:absolute;
		margin:2px;
 
		height:25px;
		BORDER: #000000 0px solid; }
 
 
.pstylebody {	position:absolute;
		BORDER: #000000 0px solid;  }
 
 
 /* MENU TEXT FACE AND SIZE */
 
 
.menulinks 		{ FONT: 13px arial, verdana, sans-serif; font-weight: normal; }
 
.menu_background 	{ background-color:#F0F0F0; }
.menu_background procedures {
	background-color: #FF9900;
}
.menu_background_procedures {
	background-color: #FF9900;
	border: thin solid #000000;
	height: 50px;
	font-family: "Times New Roman", Times, serif;
	font-size: xx-large;
	padding-top: 20px;
}
.divProc {
	width: 500px;
	display: list-item;
	white-space: pre;
	float: left;
}
.divProc2 {
	width: 500px;
	white-space: pre;
	display: list-item;
	
}
</style>
 
<script type="text/javascript" language="JavaScript" src="javascripts.js"></script> 
 
 
</head> 
 
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0"> 
 
 
 
 
 
<div><script type="text/javascript" language="JavaScript" src="header.js"></script></div> 
 
 
 
 
<div><script type="text/javascript" language="JavaScript" src="menu.js"></script></div> 
 
 
 
 
  <div><img src="picts/spacer.gif" height="10" width="20" alt="image"><br> 
    
    <p><img src="picts/front-pic1.jpg">        </p> 
  </div> 
<div align="center"> 
  
        <h1 class="menu_background_procedures"><strong>Setup - Posterior Resin</strong></h1> 
</div> 
 
 
  <div class="divProc" id="OpSetup"> 
        <input  type="checkbox" name="checkbox" id="checkbox"> Floor & chair clean, no debris remains <a href="http://debramoorhead.com/blog/">This is a test link.</a><br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Tray setup or exam tray   <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Patient napkin and chain      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Plastic covers on headrest & both light handles    <br>  
        <input  type="checkbox" name="checkbox" id="checkbox"> Safety glasses  Patient, Assistant   <br>   
        <input  type="checkbox" name="checkbox" id="checkbox"> Gloves & masks      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Tips in place on 3-way syringes      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> 4 color pen in room on Dr. side, another one in your pocket   <br>   
        <input  type="checkbox" name="checkbox" id="checkbox"> Plastic on Computer and mouse      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Headphone wires hung up, no hazards    <br>  
        <input  type="checkbox" name="checkbox" id="checkbox"> Channel 118 on TV      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> If handpiece to be used, verify water spray   <br>   
        <input  type="checkbox" name="checkbox" id="checkbox"> Dentrix chart open to patient, progress notes blank; CORRECT LAYOUT & BUTTONS      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Dentrix chart flags - make notes for doctor <br>     
        <input  type="checkbox" name="checkbox" id="checkbox"> Prior patient:  Dexis open, x-rays displayed with TxPlan to left of Dexis window      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Burs in handpieces      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Check Q Cards for individual procedures      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Is C-Prop needed?      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Seat patient, enter name & priority on white board  <br>    
        <input  type="checkbox" name="checkbox" id="checkbox"> Ask patient to turn off their cell phone  <br>    
        <input  type="checkbox" name="checkbox" id="checkbox"> Offer headphones to patient (exception - not on comprehensive or emerg exams      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Can Susan numb up for procedure?  <br>    
        <input  type="checkbox" name="checkbox" id="checkbox"> Set timer immediately after local anesthetic administered     <br> 
        <input  type="checkbox" name="checkbox" id="checkbox"> After local anesthetic, have patient swish antibacterial mouthwash for 30 seconds      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Review consent forms, if needed, for today's procedures <br>     
        <input  type="checkbox" name="checkbox" id="checkbox"> Check numbness promptly when timer says so.  Allow 5 minutes for lidocaine, 3 minutes for articaine.      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Operative, C&B & Endo:  Place rubber dam before calling doctor back to room.      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> End of Procedure (proceed in this order):      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Verify oxygen is turned off.  Record vital signs if N2O was used   <br>   
        <input  type="checkbox" name="checkbox" id="checkbox"> Receive handoff from doctor, make notes for later handoff to front office<br>      
        <input  type="checkbox" name="checkbox" id="checkbox"> New patient - verify you have SS# in family file  <br>    
        <input  type="checkbox" name="checkbox" id="checkbox"> Have patient sign Dentrix Questionnaires with ePad   <br>   
        <input  type="checkbox" name="checkbox" id="checkbox"> Update family file from Dentrix Questionnaire before printing any Rxs  <br>    
        <input  type="checkbox" name="checkbox" id="checkbox"> Review prescription instructions with patient <br>     
        <input  type="checkbox" name="checkbox" id="checkbox"> Enter Dentrix procedure codes for all forms and info sheets given  <br>    
        <input  type="checkbox" name="checkbox" id="checkbox"> Exam patients:  Enter template, health history, medical alerts  <br>    
        <input  type="checkbox" name="checkbox" id="checkbox"> Copy information from Dentrix Questionnaires before patient signs  <br>    
        <input  type="checkbox" name="checkbox" id="checkbox"> Enter consent forms in Clinical Notes      <br>
        <input  type="checkbox" name="checkbox" id="checkbox"> Enter local anesthetic(s) given in Clinical Notes   <br>   
        <input  type="checkbox" name="checkbox" id="checkbox"> Set appointment complete.  In Chart, click Refresh  <br>    
        <input  type="checkbox" name="checkbox" id="checkbox"> Enter Rxs given in Clinical Notes     <br> 
        <input  type="checkbox" name="checkbox" id="checkbox"> Save file  double check    <br>  
        <input  type="checkbox" name="checkbox" id="checkbox"> Give patient color printouts of Caesy video sheets, perio charting  <br>    
        <input  type="checkbox" name="checkbox" id="checkbox"> Handoff to front office      <br>
      </div> 
  <div class="divProc2" id="PostResin"> 
          <input  name="CheckboxResin" type="checkbox" value=""> Resin Tray	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Local ansthetic syringe(s).  Setup red (long 25 gauge) for lower, yellow (short 27 gauge) for upper<br>	
	      <input  name="CheckboxResin" type="checkbox" value=""> High speed handpiece<br>	
	      <input  name="CheckboxResin" type="checkbox" value=""> Low speed contra-angle	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Red bur block	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Astropol polishers (black bur block)	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Resin Tub (gray), including:	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> FILTEK SUPREME PLUS and Heliomolar HB	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Pentron Flowable resin (note:  do not use Accolate SRO on anterior teeth)<br>	
	      <input  name="CheckboxResin" type="checkbox" value=""> Dispenser ("Gun") for resin	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Prelude SE (Prelude 1 & Prelude 2)	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Mixing well, brush & microtip  <br>	
	      <input  name="CheckboxResin" type="checkbox" value=""> Pumice	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Caries indicator in syringe	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Consepsis scrub in syringe	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Sometimes: Flexi-wedges or wooden wedges	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Rubber dam 	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Rubber dam pre-punched	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Rubber dam frame (metal)	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Rubber dam clamp, with floss attached & extra piece of floss<br>	
	      <input  name="CheckboxResin" type="checkbox" value=""> Rubber dam napkin	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Rubber dam forceps	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> If tooth is virgin Diagnodent	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Pedo patient (younger than age 12)  small head Kavo handpiece (642B)<br>	
	      <input  name="CheckboxResin" type="checkbox" value=""> Curing light 	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Cordless curing light for assistants side	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Orange shield	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Orange Compo-box	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Q-tip for pumice	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> General Consent form	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Nitrous Oxide Consent Form, if applicable	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Ultraseal sealant material with syringe cover	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Heliomolar HB (Heavy Body) Resin & dispenser gun	<br>
	      <input  name="CheckboxResin" type="checkbox" value=""> Matrix band	<br>
	  </div>  
  
 
 
<div><script type="text/javascript" language="JavaScript" src="menu.js"></script></div> 
 
 
 
 
 
 
 
 
 
 
<div><script type="text/javascript" language="JavaScript" src="copyright.js"></script></div> 
 
 
 
 
<div><script type="text/javascript" language="JavaScript" src="copyright-allwebco.js"></script></div> 
 
 
 
<div><img src="picts/spacer.gif" height="7" width="7" alt="image"><br> 
</div> 
 
</BODY> 
</HTML> 

Open in new window

Debra11

ASKER
I don't understand what you mean by "like this?"  Are you asking if that is the page?  That is the source code of the page I'm referring to.  Did you change anything?
quincydude

copy and paste the code i posted into a html file and check the result.
Your help has saved me hundreds of hours of internet surfing.
fblack61
Rouchie

For text to wrap then the container it is in MUST have a specific width set.  The width of a DIV by default is to stretch to the maximum space available.  You specify WIDTH:AUTO in your CSS, so the div's will stretch out to 100%.

If you can put a border on each DIV then post a screen grab of your result then we can assist further!
Rouchie

Also, if the text you are showing is multi-line including line breaks, then you need to manually replace those line breaks with the HTML "<br/>" tag.

I'm not a PHP person but I think the logic is to replace \n  with <br/>
Debra11

ASKER
Quincydude - didn't work.  The test does not wrap, and the second column is shoved into the first.

Rouchie - when I give the DIV a width, I get a scroll bar at the bottom.  I want the text to wrap to the next line.  the info is being pulled from a database, so there are no breaks.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Rouchie

Its hard to picture what's happening on your screen.

Try the following:


.divProc {
      width: auto;  <---  REMOVE THIS LINE
      display: marker;  <---  REMOVE THIS LINE
      white-space: pre;  <---  REMOVE THIS LINE
      height: 1100px;
      float: left;
      border:1px solid black;  <--- ADD THIS LINE
}
.divProc2 {
      width: auto;  <---  REMOVE THIS LINE
      white-space: pre;  <---  REMOVE THIS LINE
      display: list-item;  <---  REMOVE THIS LINE
      height: 1100px;
      border:1px solid black;  <--- ADD THIS LINE
}

Then post us a screen grab please.
Debra11

ASKER
Rouchie - thanks for your help. That doesn't work at all - everything comes in side-by-side.  I've attached a screen shot.

If you'll go to http://www.streamdent.com/PostResin.php you'll see the original problem.  So far, "auto" has been the best solution.
tried.jpg
Rouchie

The first immediate issue here is that Firefox displays this correctly as a vertical list, but IE shows a long list like your screen grab.  Other sites have documented that IE struggles to render "pre" text.  So, it may be that the browsers are struggling with your CSS.  Firefox is excellent at correctly displaying, and given what I see on screen, I'm saying that you have serious problems with your CSS design overall.

We need to start from the beginning here, because you have dozens of CSS rules and it will take forever to find which one is causing the problem.

If you only need 2 columns of checkboxes then you just don't need all this CSS.

Please create a blank page with NO CSS.  Add your page PHP code you write out the two lists, again with NO CSS, just line breaks please.  Put each list inside its own DIV.  Once we have then we can add some easy CSS to build it back up again.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Debra11

ASKER
With this niche market, I can require users to install Firefox and had already planned to do so.  I created a blank page, but cannot get it to pull the text from the database - I can figure that one out later.

So what I have is just two divs stacked on top of each other with the checkboxes one after the other.  This is what I started with!  (Only - the text did display.)  

If you have a simpler CSS that works, I'm all ears.  I thought mine was simple.

"Just line breaks please." - I don't know what you mean by this - I'm using a repeated region.  (I don't have any line breaks.)
nocss.jpg
Rouchie

Okay we'll need the text for each entry to be displayed please.

Then, can you please post the PHP code for the database loop (the one that displays the checkboxes and the text alongside it)?
Debra11

ASKER
<body> <div>
  <?php do { ?>
      <?php do { ?>
        <input <?php if (!(strcmp($row_rsOpSetup['Complete'],"Yes"))) {echo "checked=\"checked\"";} ?> type="checkbox" name="checkbox" id="checkbox">
        <?php echo $row_rsOp['Description']; ?>
        <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
      <?php } while ($row_rsOp = mysql_fetch_assoc($rsOp)); ?>
  </div>
  <div>
<?php do { ?>
  <?php do { ?>
    <input <?php if (!(strcmp($row_rsPostResin['Complete'],"Yes"))) {echo "checked=\"checked\"";} ?> name="CheckboxResin" type="checkbox" value="">
    <?php echo $row_rsPost['Description']; ?>
      <?php } while ($row_Recordset2 = mysql_fetch_assoc($Recordset2)); ?>
  <?php } while ($row_rsPost = mysql_fetch_assoc($rsPost)); ?>
  </div>  
 
</body>
again.jpg
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
quincydude

My example would work, just copy the whole thing (do not edit anything) and test.
Also, it's very simple for you to add a linebreak in your php code in every loop of fetching a row.

Rouchie

>> it's very simple for you to add a linebreak in your php code in every loop of fetching a row.

Yes this is my next step.  Again as I'm not a PHP person so if there's a better way then I'm all ears.

Anyway Debra11, where the following line occurs in your code (both times):

  <?php echo $row_rsOp['Description']; ?>

Can you add a line break directly after it:

  <?php echo $row_rsOp['Description']; ?><br/>

Hopefully you should then get two vertical lists, which I can provide some CSS for to make them appear side-by-side.
Debra11

ASKER
Rouchie - the break worked as you thought it would.  I tried it in the other file - FYI - and it just added a line between entries, so I'm hoping your new CSS will work.
next.jpg
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
Rouchie

Okay put the div's inside an outer container div, then give them both unique class names that we can reference from CSS.  Finally we need a div at the very end to terminate the columns.  See code snippet.

Then add a stylesheet file containing this information:


div.container {border:1px solid red;}
div.leftcol {border:1px solid blue; float:left; width:45%;}
div.rightcol {border:1px solid green; float:right; width:45%;}
div.clear {clear:both; height:0; overflow:hidden;}

As I can't run PHP on my machine, it might need tinkering with, so please post another screen grab with your requirements if it doesn't work out just right at the moment. :-)
<body> 
<div class="container">
	<div class="leftcol">
		<?php do { ?>
			<?php do { ?>
				<input <?php if (!(strcmp($row_rsOpSetup['Complete'],"Yes"))) {echo "checked=\"checked\"";} ?> type="checkbox" name="checkbox" id="checkbox">
				<?php echo $row_rsOp['Description']; ?><br/>
			<?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
		<?php } while ($row_rsOp = mysql_fetch_assoc($rsOp)); ?>
	</div>
	<div class="rightcol">
		<?php do { ?>
			<?php do { ?>
				<input <?php if (!(strcmp($row_rsPostResin['Complete'],"Yes"))) {echo "checked=\"checked\"";} ?> name="CheckboxResin" type="checkbox" value="">
				<?php echo $row_rsPost['Description']; ?><br/>
			<?php } while ($row_Recordset2 = mysql_fetch_assoc($Recordset2)); ?>
		<?php } while ($row_rsPost = mysql_fetch_assoc($rsPost)); ?>
	</div>
	<div class="clear">&nbsp;</div>
</div>
</body>

Open in new window

Debra11

ASKER
Rouchie - very, very, very, very close!  Your idea DID work - is there any way to make the wrapped line indent (just line up with the line above it)?  You'll see what I mean.
yay.jpg
Rouchie

Ahh well, that is the really tricky part.  By design things are working correctly, so, to make the text indent then we have to further break things down.

I'm quite sure it could be done, but it depends how complex you want to get.  Let me have an experiment and let you know...!
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Debra11

ASKER
Thanks, Rouchie!  This is what I've come up with so far:

<div class="container">
  <div class="leftcol">
    <?php do { ?>
    <input <?php if (!(strcmp($row_rsOpSetup['Complete'],"Yes"))) {echo "checked=\"checked\"";} ?> type="checkbox" name="checkbox" id="checkbox"><div class="lefttext"><?php echo $row_rsOpSetup['Description']; ?><br/></div>
    <?php } while ($row_rsOpSetup = mysql_fetch_assoc($rsOpSetup)); ?>
</div>
<div class="rightcol">
    <?php do { ?>
      <input <?php if (!(strcmp($row_rsPostResin['Complete'],"Yes"))) {echo "checked=\"checked\"";} ?> name="CheckboxResin" type="checkbox" value=""> <?php echo $row_rsPostResin['Description']; ?><br/>
      <?php } while ($row_rsPostResin = mysql_fetch_assoc($rsPostResin)); ?>
    </div>
  <div class="clear">&nbsp;</div>
  </div>  
 
almost.jpg
Rouchie

Okay I've got it to work using HTML only.  Here's the code so you know it works.

div.container {border:1px solid red;}
div.leftcol {border:1px solid blue; float:left; width:45%;}
div.rightcol {border:1px solid green; float:right; width:45%;}
div.leftcol div.left, div.rightcol div.left {padding:0; width:5%; margin-right:1%; float:left; clear:left; border:1px dashed gray;}
div.leftcol div.right, div.rightcol div.right {padding:0; width:85%; float:left; border:1px dashed blue;}
div.clear {clear:both; height:0; overflow:hidden;}


<div class="container">
	<div class="leftcol">
		<div class="left">
			<input type="checkbox" value="" />
		</div>
		<div class="right">
			Description goes here
		</div>
		<div class="left">
			<input type="checkbox" value="" />
		</div>
		<div class="right">
			Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here
		</div>
	</div>
	<div class="rightcol">
		<div class="left">
			<input type="checkbox" value="" />
		</div>
		<div class="right">
			Description goes here
		</div>
		<div class="left">
			<input type="checkbox" value="" />
		</div>
		<div class="right">
			Description goes here Description goes here Description goes here Description goes here Description goes here Description goes here
		</div>
	</div>
</div>

Open in new window

ASKER CERTIFIED SOLUTION
Rouchie

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
Debra11

ASKER
That did it, Rouchie!  Thanks so much - I really appreciate your help.  I can take it from here and I might be back, but for now I'm marking this issued "resolved." Thanks for working so hard on this.  With the way you laid things out, both with posting the code and the CSS, I was able to see what you did and understand why you did it.  Have an awesome weekend!
Got-it.jpg
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
Debra11

ASKER
This worked - and I can see why - thank you!
Rouchie

Thanks very much for your kind feedback.  You're most welcome!

Have a nice weekend yourself :-)
Rouchie

On a side note, if you want to push the text downwards slightly so that it lines up with the checkboxes (which have a margin to push them downwards by default), just add some padding to the top of the right (description) css:


div.leftcol div.right, div.rightcol div.right {padding:5px 0 0 0; width:85%; float:left; border:1px dashed blue;}
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.