Need help with float drop with dynamic content

HTML & CSS
1

I have a 2-column layout. I’d like for the left column to shrink-wrap the content and the right column to expand to fill the remainder of the page. The right column will have dynamic content, so if the content exceeds the screen res, I’d like to have scrollbars appear. I tried solving the issue by floating both columns left, but a) if there’s not much content in the right column, it doesn’t expand to fit the rest of the page and, natch, b) if there’s too much content on the right, the float drops below the first column. I think this is a newbie kind of question that I should know the answer to but I’m drawing a blank.

The id for the left column is reportTitles and the right column is reportContent. Both are contained by mainContainer. Here’s the pertinent CSS followed by a generated HTML:


#mainContainer {
	color:inherit;
	background-color:#e9e3cb;	
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -3em;
	overflow:hidden;
	}

.reportTitles  {
	float:left;
	margin:5px 5px 20px 5px;	
	}
	
.reportTitles h3  {
	background-color:#000;
	border:1px solid #000;
	display:block;
	color:#fff;
	height:20px;
	padding:5px;
	margin:0;
	}
	
.reportTitles h3 img  {
	position:absolute;
	top:50px;
	left:127px;
	z-index:100;
	}
	
.reportTitles h3 span img  {
	position:absolute;
	top:50px;
	left:127px;
	z-index:100;
	}
	
.reportTitles ul {
	background-color:#f9f7f0;
	border:1px solid #e9e3cb;
	}
	
.reportTitles ul li {
	font-weight:bold;
	}
	
.reportTitles ul li img {
	vertical-align:middle;
	}	
	
.reportTitles ul li ul {
	background-color:#fff;
	border:none;
	margin:0px 0px 10px 34px;	
	}
	
.reportTitles ul li ul li {
	font-weight:normal;	
	margin-bottom:9px;	
	}
	
.reportTitles ul li ul li p a, .reportTitles ul li p a {
	line-height:1.4em;
	}
	
.reportDivision {
	padding:10px;
	background-color:#fff;
	margin:15px;
	-moz-border-radius:10px;
    -webkit-border-radius:10px;
    -khtml-border-radius:10px;
    border-radius:10px;
	border:1px solid #e9e3cb;
	}
	
.reportContent  {
	margin:5px 10px;
	padding-bottom:20px;
	float:left;
	border:1px solid #e9e3cb;
	}
	
.reportContent p {
	line-height:1.5em;
	margin-bottom:1.7em;
	}
	
.reportToolsWrap {
	background-color:#f9f7f0;
	border:1px solid #e9e3cb;
	padding:0 10px;
	}
			
#reportTools {
	margin:5px 0;
	}
	
#reportTools li {
	display:inline;
	padding:5px;
	}
	
#reportTools img {
	vertical-align:middle;
	padding-right:3px;
	}
	
#reportTools a {
	padding-right:20px;
	font-size:.9em;	
	}



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ShrinkOffice | Reports :: Reports/Statements/CMS</title>
<meta name="description" content="" />
	<link rel="stylesheet" type="text/css" href="_styles/default.css" />
	<link rel="stylesheet" type="text/css" href="_styles/menus.css" />
	<link rel="stylesheet" type="text/css" href="_styles/winmenu.css" />
	<link rel="shortcut icon" href="favicon.ico" />	
	
	<style type="text/css">
@import "/__shrinkOffice/_styles/dhtml.css";
@import "/__shrinkOffice/_styles/forms.css";

</style>
	
	<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="_styles/ie.css" />
	<![endif]-->

	<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="_styles/ie6.css" />
	<script type="text/javascript" src="jslibs/ADxMenu.js"></script>
	<![endif]-->
	
   <script type="text/javascript" src="jslibs/dhtml.js"></script>
   
</head>
<body>
<div id="mainContainer">

<div id="header">
	
	<div id="status">You are securely logged in as: <h1>Susan C Laddle</h1> <span id="logout"><a href="#" onclick="logout(event);" title="You are securely logged in. Click here to logout."><img src="_images/icons/lockSmall.png" alt="You are securely logged in. Click here to logout." /> Logout</a></span></div>
	
	
	<div id="globalNav">
	<ul class="adxm menu" id="primary">
	<li  id="clients"><span><a href="clients.php">Clients/Sessions/Payments</a></span>

		<ul class="secondary">
		<li id="activeClient"><span><a href="clients.php?nav=active"><img src="_images/icons/active.png" alt="Active" class="noie" />Active</a></span></li>
		<li id="inactive" class="last"><span><a href="clients.php?nav=inactive"><img src="_images/icons/inactive.png" alt="Archived" class="noie" />Archived</a></span></li>
		</ul>
	</li>
	
	<li  id="calendar"><span><a href="calendar.php">Calendar</a></span>
		<ul class="secondary">

		<li id="daily"><span><a href="calendar.php?nav=daily"><img src="_images/icons/daily.png" alt="Daily" class="noie" />Daily</a></span></li>
		<li id="weekly"><span><a href="calendar.php?nav=weekly"><img src="_images/icons/weekly.png" alt="Weekly" class="noie" />Weekly</a></span></li>
		<li id="monthly" class="last"><span><a href="calendar.php?nav=monthly"><img src="_images/icons/monthly.png" alt="Monthly" class="noie" />Monthly</a></span></li>
		</ul>
	</li>
	
	<li class="globalNavItem" id="reports"><span><a href="reports.php">Reports/Statements/CMS</a></span>

	</li>
	
	<li  id="library"><span><a href="libraries.php">Libraries</a></span>
		<ul class="secondary">
		<li id="diagnoses"><span><a href="libraries.php?nav=diagnoses"><img src="_images/icons/diagnoses.png" alt="Diagnoses" class="noie" />Diagnoses</a></span></li>
		<li id="cpt"><span><a href="libraries.php?nav=cpt"><img src="_images/icons/cpt.png" alt="Procedure Codes" class="noie" />Procedure Codes</a></span></li>
		<li id="therapists"><span><a href="libraries.php?nav=therapists"><img src="_images/icons/therapists.png" alt="Therapists" class="noie" />Therapists</a></span></li>
		<li id="insurance"><span><a href="libraries.php?nav=insurance"><img src="_images/icons/insurance.png" alt="Insurance Companies" class="noie" />Insurance Companies</a></span></li>

		<li id="meds" class="last"><span><a href="libraries.php?nav=meds"><img src="_images/icons/meds.png" alt="Medications" class="noie" />Medications</a></span></li>
		</ul>
	</li>
	
<li  id="help"><span><a href="help.php" title="Help">Help</a></span>
		<ul class="secondary">	
		<li id="manual"><span><a href="help.php?nav=manual"><img src="_images/icons/manual.png" alt="Manual" class="noie" />Manual</a></span></li>
		<li id="tutorials"><span><a href="help.php?nav=tutorials"><img src="_images/icons/tutorials.png" alt="Tutorials" class="noie" />Tutorials</a></span></li>

		<li id="faq"><span><a href="help.php??nav=faq"><img src="_images/icons/faq.png" alt="FAQ" class="noie" />FAQ</a></span></li>
		
		<li id="contact" class="last"><span><a href="help.php?nav=contact" onclick="return false;"><img src="_images/icons/contact.png" alt="Contact Us" class="noie" />Contact Us</a></span></li>
		</ul>
	</li>
	
	</ul>				
	</div> <!-- end globalNav -->
	<div id="logo"></div>

</div> <!-- end header -->


<div id="secondaryContentContainer">
	<div id="shadow"><img src="_styles/_images/gnav_reports.png" alt="reports" /></div><!-- end shadow -->
	
		
	<div id="pageHelp">
	<a href="pagehelp.php" onclick="return helpwin('pagehelp.php?g_nav=reports&amp;nav=memorized')" ><img src="_images/icons/pagehelpLg.png" />Help for this page</a>
	</div>
	
	<ul id="localNav">
			<li class="localNavItem">

		 		 <span><a href="reports.php?nav=memorized"><img src="_images/icons/memorized.png" alt="Reports/Statements/CMS" />Reports/Statements/CMS</a></span>
		 		
	</li>
			</ul>
</div>  <!-- end secondaryContentContainer -->		
		
<div id="tabBody">
	<div id="mainContentReplace">

<div id="mainContent">


<div class="reportTitles">

	<h3><span>Select a Report</span><img src="_images/arrowDown.png" alt="Select Report"></h3>
	<ul>		
		<li class="reportDivision"><img src="_images/statementReport.png" alt="Statements &amp; CMS-1500's" />Statements &amp; CMS-1500's
				<ul>
					<li>
						<p><a href="" title="">Statements</a></p>
					</li>
					
					<li>

						<p><a href="" title="">CMS-1500</a></p>
					</li>	
				</ul>				
			</li>
	
	
		<li class="reportDivision"><img src="_images/financialReport.png" alt="Financial Reports" />Financial Reports
		
			<ul>
				<li>
					<p><a href="" title="">All Payers</a></p>
				</li>

				<li>
					<p><a href="" title="">Insurance Companies</a></p>
				</li>
						
				<li>
					<p><a href="" title="">Clients</a></p>
				</li>					
			</ul>
		</li>
		
		<li class="reportDivision"><img src="_images/clientReport.png" alt="Client Reports" />Client Reports
			<ul>
				<li><p><a href="" title="">Client Medication List</a></p></li>
				<li><p><a href="" title="">Client Contact Info</a></p></li>
				<li><p><a href="" title="">Client Notes</a></p></li>

				<li><p><a href="" title="">Client Insurance Info</a></p></li>
				<li><p><a href="" title="">Session Dates &amp; Info</a></p></li>
				<li><p><a href="" title="">Authorization Info</a></p></li>
			</ul>		
		</li>
		
		<li class="reportDivision"><img src="_images/miscReport.png" alt="Miscellaneous Reports" />Miscellaneous Reports
			<ul>

				<li><p><a href="" title="">Practice Information</a></p></li>
				<li><p><a href="" title="">Insurance Company List</a></p></li>
			</ul>		
		</li>	
	
	</ul>

		
	
	</div> <!-- end reportTitles -->
	<div class="reportContent">
	<!-- <p>Clicking a report on the left will open a form that will allow you to select the parameters you want for your report. Once you have submitted the form, your report and the tools to save as PDF and/or print will display here.</p> -->  
	
		<div class="reportToolsWrap">

			
			<ul id="reportTools">
				<li><a href="#"><img src="_styles/_images/tools/printerTool.png">Print Report</a></li> 
				<li><a href="#"><img src="_styles/_images/tools/pdfTool.png">Save to PDF</a></li>	
				<li class="onscreenTips">(Note: you can print the report by using the Print Report tool or by saving to PDF and then printing the PDF.)</li>
			</ul>
			<!-- <p class="onscreenTips">(Note: you can print the report by using the Print Report tool or by saving to PDF and then printing the PDF.)</p> -->
		</div>
	
	
	
	
	
	
	<div id="wrap">

	<h1 class="textLeft">Amounts Billed, Received &amp; Outstanding: Totals</h1>

	<h2>Payer: <span>All Payers</span></h2>
	<h2>Services Rendered To: <span>All Clients</span></h2>
	<h2>Provider: <span>Susan C. Litton, Ph.D.</span></h2>

	<table cellpadding="5px" cellspacing="0">
	<thead>
		<tr>
			<th>Date Billed</th>
			<th>Payer</th>
			<th>Clients</th>
			<th>Amt Billed</th>

			<th>Amt Recd</th>
			<th>Adjustments</th>
			<th>Balance Due</th>
		</tr>
	</thead>
	
	<tbody>		
		<tr>
			<td class="textRight">07/03/09</td>

			<td>Aetna</td>
			<td>Burroughs, Tina</td>
			<td class="textRight">$100.00</td>
			<td class="textRight">$70.00</td>
			<td class="textRight">$30.00</td>
			<td class="textRight">$0.00</td>

		</tr>
		
		<tr>
			<td class="textRight">07/09/09</td>
			<td>Smith, Jay</td>			
			<td>Smith, Jay</td>
			<td class="textRight">$50.00</td>
			<td class="textRight">$50.00</td>

			<td class="textRight">$0.00</td>
			<td class="textRight">$0.00</td>
		</tr>
		
		<tr>
			<td class="textRight">07/11/09</td>
			<td>Blue Cross Blue Shield</td>
			<td>Johnson, Tina; Downs, Fred; Sterling, Danny</td>

			<td class="textRight">$100.00</td>
			<td class="textRight">$90.00</td>
			<td class="textRight">$0.00</td>
			<td class="textRight">$10.00</td>
		</tr>
		
		<tr>
			<td class="textRight">07/14/09</td>

			<td>Medicare</td>
			<td>Karim, Jared; Bundy, Tara</td>
			<td class="textRight">$350.00</td>
			<td></td>
			<td></td>
			<td class="textRight">$350.00</td>
		</tr>

		
		<tr>
			<td class="textRight">07/15/09</td>
			<td>Aetna</td>
			<td>Grey, Susan</td>
			<td class="textRight">$100.00</td>
			<td class="textRight">$40.00</td>

			<td class="textRight">$20.00</td>
			<td class="textRight">$40.00</td>
		</tr>
		
		<tr>
			<td class="textRight">07/17/09</td>
			<td>Cross, Bill</td>
			<td>Cross, Bill</td>

			<td class="textRight">$200.00</td>
			<td class="textRight">$100.00</td>
			<td class="textRight">$40.00</td>
			<td class="textRight">$60.00</td>
		</tr>	
		
		
		<tr class="bold">
			<td colspan="3" class="textRight">Totals:</td>

			<td class="textRight">$900.00</td>
			<td class="textRight">$350.00</td>
			<td class="textRight">$90.00</td>
			<td class="textRight">$460.00</td>
		</tr>		
		
	</tbody>
	</table>

	
	<h3>Report Information:</h3>
	<p><span class="bold">Report Date:</span> November 14, 2009</p>
	<p><span class="bold">Date Range:</span> July 1, 2009 - Aug 1, 2009</p>
	<p><span class="bold">Description:</span> Amounts billed with total payments received, adjustments and outstanding balances for all payers for services rendered to all clients. </p>

	
	<h3>Provider Information:</h3>
	<p>Susan C. Laddle, Ph.D. | Tax ID: 440-52-8896 | NPI: 1802353511</p>
	<p>2944 Magnolia Rd, Tucker, GA 30033</p>
	<p>771-443-6361</p>
	</div> <!-- end wrap -->
	</div> <!-- end reportContent -->

	
	<div class="clear">&nbsp;</div>


</div> <!-- end mainContent -->
</div> <!-- end mainContentReplace -->
	<div class="clear"></div>
</div> <!-- end tabBody -->
	
<div id="sitemapOuterContainer">
	<!-- <h4>You are here: <span>Reports/Statements/CMS</span> > Reports/Statements/CMS </h4> -->
<div id="sitemapInnerContainer"><img src="_styles/_images/sitemap.png" alt="Sitemap" class="noie" />

<ul class="sitemapItem">
	<li ><span><a href="clients.php">Clients/Sessions/Payments</a></span>
		<ul>
			<li><a href="clients.php?nav=active">_Active</a></li>
			<li><a href="clients.php?nav=inactive">_Inactice</a></li>
		</ul>
	</li>

	
	<li ><span><a href="calendar.php">Calendar</a></span>
		<ul>
			<li><a href="calendar.php?nav=daily">_Daily</a></li>
			<li><a href="calendar.php?nav=weekly">_Weekly</a></li>
			<li><a href="calendar.php?nav=monthly">_Monthly</a></li>
		</ul>
	</li>

	
	<li class="globalNavItem"><span><a href="reports.php">Reports/Statements/CMS</a></span>
		<ul>
			<!-- <li><a href="reports.php?nav=memorized">_Memorized</a></li>
			<li><a href="reports.php?nav=custom">_Create Custom</a></li> -->
		</ul>
	</li>
	
	<li ><span><a href="libraries.php">Libraries</a></span>
		<ul>
			<li><a href="libraries.php?nav=diagnoses">_Diagnoses</a></li>

			<li><a href="libraries.php?nav=cpt">_Procedure Codes</a></li>
			<li><a href="libraries.php?nav=therapists">_Therapists</a></li>
			<li><a href="libraries.php?nav=insurance">_Insurance Companies</a></li>
			<li><a href="libraries.php?nav=meds">_Medications</a></li>
		</ul>
	</li>
	
	<li><span><a href="javascript:newWin('help.php');" title="Help">Help</a></span>

		<ul>	
			<li><a href="help.php?nav=tutorials">_Tutorials</a></li>
			<li><a href="help.php?nav=faq">_FAQ</a></li>
			<li><a href="help.php?nav=index">_Index</a></li>			
			<li><a href="help.php?nav=contact">_Contact Us</a></li>
		</ul>
	</li>
	</ul>				
	<div class="clear"></div>

</div> <!-- end sitemapInnerContainer -->
</div> <!-- end sitemapOuterContainer -->
<div class="push"></div> <!-- end push -->
</div> <!-- end mainContainer -->

<div id="footer">
<p>Copyright © 2010 by Shrink Office, LLC. All Rights Reserved.</p>	
</div> <!-- end footer -->

</body>
</html>
2

I’d like for the left column to shrink-wrap the content and the right column to expand to fill the remainder of the page. The right column will have dynamic content, so if the content exceeds the screen res, I’d like to have scrollbars appear.

I’m unclear. You would like scrollbars in which direction?

I ask because vertical ones make sense, are easy to make, and are easier on visitors than scrolling sideways (however if this is some sort of gallery then I understand the sideways bit… but it looks like a report).

If you mean vertical scrollbars, then I would think this would work (but I may be missing something):
HTML
header
left box
right box
foot

(yes I’m super-oversimplifying, mostly because I’m a simple person)

left box floated left, ideally with a set width rather than only shrinkwrapping!!, while right box has NO set width (and ideally nothing to trigger Haslayout) and a left margin equal to the width of the left box.

This means the left margin will slide under the float to touch the left inner edge of the container. Because it’s not a float, it should always try to fill the rest of the available space (but ONLY if the box holding both of them has no set width!).

If Haslayout gets triggered on the box, then leave off the left margin (since in IE that will start at the edge of the left floated box).

If you wanted the page to extend only horizontally, then I think you’d want a trick as done for horizontal pages. However those come with two problems (besides all the other problems, lawlz): you have to be very careful about the height of the left box and careful of the height of the whole page; and you will eventually, somewhere, in some browser (I vote Opera or Konqueror) will have a limit. But, the page WILL be able to grow to the right if needed UP TO that limit.

Which is it?

3

Just the vertical scroll - sorry I wasn’t clear. The difficulty I’ve had is that I’d really like the left column to shrink wrap - especially for folks who might have their fonts bumped up. So what I’d like is 2 columns where neither has a fixed width. Is that possible?

4

Not in any straightforward way, but I can imagine Paul or ErikJ or Rayzur coming in here with a fancy pants-blowing tricky way : )

however if text-enlargement is the MAIN reason for the left side shrinkwrapping then I would say you could still do it the simple way outlined above and use em’s to size the container (er, the left box). As text grows, so does the box.

If a left margin is being used on the right box then, that margin is approx the same em…

so if the left box is, say, 16em wide (on my computer/OS/browser/font preference that’s approx 250px) then the left margin on the other box is 16.2em or something. Or, keep them the same, as I notice that .2 grows really fast with just a few text enlargements!

The thing I don’t like about shrink-wrapping when the content is loose text is that because text can wrap, one browser doesn’t have to wrap at the same place as another browser. I also discovered 3 years ago that I no can haz min and max width… they’ll work (now) on modern browsers but don’t count as width.

I was going to link to a page I did that does this but a) it might be considered self-promo (and it’s waaaaay too much code to post, it’s a complicated page) and b) I realised that the left col is too rigid to approximate what you want because it’s an HTML table working as a calendar: it can grow with text, but is set in px width, so is a bad example.

But I know I’ve got one floating around here somewhere, and I’ll post it (unless someone else comes along with a better idea anyway) and you can play with it and see if it works with your data the way you want.

5

Well, at least now I don’t feel so bad. I struggled with this for over an hour before I even posted because I felt like it was going to be SUCH a simple answer that I was overlooking.

And yeah, if there’s not a good fancy pants way to do it, your suggestion of using ems and a fixed width for the left column is probably the best bet.

6

Well, you could try it now and see if it does what you want. If not, we keep trying. : )

I’ve heard of people resizing boxes with Javascript, but I’d soooo rather not go that way. : )

7

Hi, I don’t believe this is possible just because 1) You could float the left sidebar, that’d be shrink to fit. No width can be on it.

To get the right column to take up the remaining space you could just not float the right column, but just give it a left margin= to the left columns width. That’s what a normal 2 column (right one fluid) layout has.

However in that example you need hte left columsn width. You could set a fixed width on the left column, and for those with JS enabled, you could remove the width (with JS) and find the calculated width of the left column, and then set the right column to have that left margin set :). That’d work best IMHO. There isn’t a fancy pants trick for this though (yet?) ;).

8

You guys are making me feel better. :slight_smile: