• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 338
  • Last Modified:

Correct HTML and CSS to divide page into panels and have scrollbar within each panel if necessary

I am trying to divide the screen into several panels for a web application with some of the dimensions fixed and others flexible to use up all available browser window space.  I would like to be able to have scrollbars within the panels when the content does not fit.  In particular, I would like a fixed header with panels below it to use up the remainder of the page, but for each panel to have its own scroll bar and no scroll bar on the page as a whole.

I have some sample code at http://zambia-arisia-dev.dreamhosters.com/test2.html

I put all the CSS inline on the elements for ease of illustration of what I'm trying to do.

The URL above renders as I intend it in Chrome 14.0 (Mac) and Safari 5.0.6 (Mac).  On Firefox 7.0.1 Mac, the content which does not fit under "Upper td title" overruns its intended container instead of creating a scrollbar.

IE9 on a PC is even weirder.  In quirks mode, the "Upper td title" sections works as intended, but the left panel does not maintain my directed minimum width of 350px.  In IE9 mode, the width is correct, but the content overflows, the right panel is shifted down, and the two panels on the left don't fit within the body height creating a scroll bar for the whole page.

Can anyone suggest a combination of HTML and CSS which will render correctly on these four browsers?  I'm willing to continue to use tables (as I am currently doing) or drop them for divs, which I'd prefer but don't think is feasible.

Thanks.
0
olszowka
Asked:
olszowka
  • 6
  • 5
1 Solution
 
LZ1Commented:
First, try taking the inline style off of the <html> tag

<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%; width 100%; margin: 0; padding; 0">

Should be:
<html xmlns="http://www.w3.org/1999/xhtml">

Let's see where that puts us.
0
 
olszowkaAuthor Commented:
I just tried removing the style on the <html> tag.  It caused safari and chrome, which had previously displayed correctly, to no longer fill the entire screen.  Similarly, Firefox also no longer filled the entire screen, so its display was even worse.
0
 
LZ1Commented:
Before you change anything else, can I ask you a question?  Why are you using tables for the layout? And why are you using so many nested tables at that?  
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
olszowkaAuthor Commented:
Tables are the only way I know to create multiple sections to divide up a space and force 100% of the space to be used without having to specify the exact size of each section.

If you know a way to accomplish that without tables, I'm happy to try it.  The only other way I've seen is to write a javascript function to compute all the desired sizes and fire it off on page load and resize events.
0
 
LZ1Commented:
I personally don't mind if you use tables for your layout as it is YOUR layout. However, you could enclose everything inside of a table and then use DIVs/CSS to control everything else.

As I stated before, IE can be very very picky when it comes to having things in places they shouldn't be. If you have an inline style on the <html> tag, then IE immediately goes into Quirks mode.

Can you give me a screenshot of what it's supposed to look like? I can help code it for you a little easier if I have an example.
0
 
olszowkaAuthor Commented:
I still need to use nested tables, because there are several places where I need to divide the available space among two or three subordinate sections.

Can you open the page with safari or chrome?  (I think Chrome on the PC is OK) That's what it's supposed to look like.
0
 
LZ1Commented:
I see it on Chrome.  Try this:
<!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" style="height: 100%; width 100%; margin: 0; padding; 0">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Page Title</title>
</head>
<body style="height:100%; width:100%; margin: 0; padding: 0">
<table style="height:100%; width:100%; margin: 0; padding: 0; border-spacing: 0; cell-padding: 0">
	<tr>
		<td>
			<h1>Overall Page Header</h1>

		</td>
	</tr>
    <tr>
    	<td style="height:100%; width:100%; margin: 0; padding: 2px">
    		<table style="height:100%; width:100%; margin: 0; padding: 0;border-spacing: 0; cell-padding: 0;">
    			<tr>
    				<td style="width:350px; min-width: 350px; height: 100%; margin: 0; padding: 0 2px 0 0;">
    					<table style="border: 1px solid black; height: 100%; width: 100%">
    						<tr>

    							<td style="height: 350px; border-bottom: 1px solid black">
    								<div style="height: 100%; margin: 2px;overflow:scroll;">
    									<table style="height:100%; width:100%">
    										<tr>
        										<td style="height: 1px; padding: 3px">
        											<div style="margin: 3px; padding: 3px; Border: 1px solid black; text-align: center; background-color:#808080">
        												<span style="font-family: Arial; font-size: 16px; font-weight: bold">Upper td title</span>
        											</div>

        										</td>
    										</tr>
    										<tr>
    											<td>
    						                        <div style="height: 100%; overflow:auto;">
    						                            <div><input type="checkbox" style="margin-right: 8px"/>One</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Two</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Three</div>

    						                            <div><input type="checkbox" style="margin-right: 8px"/>Four</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Five</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Six</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Seven</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Eight</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Nine</div>

    						                            <div><input type="checkbox" style="margin-right: 8px"/>Ten</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Eleven</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Twelve</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Thirteen</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Fourteen</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Fifteen</div>

    						                            <div><input type="checkbox" style="margin-right: 8px"/>Sixteen</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Seventeen</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Eighteen</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Nineteen</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-one</div>

    						                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-two</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-three</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-four</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-five</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-six</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-seven</div>

    						                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-eight</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-nine</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Thirty</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Thirty-one</div>
    						                            <div><input type="checkbox" style="margin-right: 8px"/>Thirty-two</div>
    						                        </div>

    											</td>
    										</tr>
    									</table>
    		                        </div>
    							</td>
    						</tr>
    						<tr>
    							<td style="height:100%; width:100%">
    								<table style="height:100%; width:100%">

    									<tr>
    										<td style="height: 1px; padding: 3px">
    											<div  style="margin: 3px; padding: 3px; Border: 1px solid black; text-align: center; background-color:#808080">
    												<span style="font-family: Arial; font-size: 16px; font-weight: bold">lower td title</span>
    											</div>
    										</td>
    									</tr>
    									<tr>

    										<td style="height: 1px; padding: 3px; text-align:center">
    											<span style="padding-left:10px;padding-right:5px"><button>Button</button></span>
    											<span style="padding-left:5px;padding-right:10px"><input type="checkbox" id="A1"/><label for="A1">Checkbox</label></span>
    										</td>
    									</tr>
    									<tr>
    										<td>
    											<div style="height: 100%; overflow:auto">&nbsp;</div>

    										</td>
    									</tr>
    								</table>
    							</td>
    						</tr>
    					</table>
    				</td>
    				<td style="width:85%; height: 100%; margin: 0; padding: 0 0 0 2px;">
    					<div style="border: 1px solid black; height: 100%; width: 100%">&nbsp;</div>

    				</td>
    			</tr>
    		</table>
    	</td>
    </tr>
</table>
</body>
</html>

Open in new window

0
 
olszowkaAuthor Commented:
That code caused "Upper td title" to scroll off the screen.   I don't want that entire section to scroll, just the div which contains all the divs with "one", "two", etc.
0
 
LZ1Commented:
Whoops.  I see that.  Try this:
<!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" style="height: 100%; width 100%; margin: 0; padding; 0">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Page Title</title>
</head>
<body style="height:100%; width:100%; margin: 0; padding: 0">
<table style="height:100%; width:100%; margin: 0; padding: 0; border-spacing: 0; cell-padding: 0">
        <tr>
                <td>
                        <h1>Overall Page Header</h1>

                </td>
        </tr>
    <tr>
        <td style="height:100%; width:100%; margin: 0; padding: 2px">
                <table style="height:100%; width:100%; margin: 0; padding: 0;border-spacing: 0; cell-padding: 0;">
                        <tr>
                                <td style="width:350px; min-width: 350px; height: 100%; margin: 0; padding: 0 2px 0 0;">
                                        <table style="border: 1px solid black; height: 100%; width: 100%">
                                                <tr>

                                                        <td style="height: 350px; border-bottom: 1px solid black">
                                                                <div style="height: 100%; margin: 2px;">
                                                                        <table style="height:100%; width:100%">
                                                                                <tr>
                                                                                        <td style="height: 1px; padding: 3px">
                                                                                                <div style="margin: 3px; padding: 3px; Border: 1px solid black; text-align: center; background-color:#808080">
                                                                                                        <span style="font-family: Arial; font-size: 16px; font-weight: bold">Upper td title</span>
                                                                                                </div>

                                                                                        </td>
                                                                                </tr>
                                                                                <tr>
                                                                                        <td>
                                                                        <div style="height: 100%; overflow:scroll;height:300px;">
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>One</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Two</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Three</div>

                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Four</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Five</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Six</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Seven</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Eight</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Nine</div>

                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Ten</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Eleven</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Twelve</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Thirteen</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Fourteen</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Fifteen</div>

                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Sixteen</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Seventeen</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Eighteen</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Nineteen</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-one</div>

                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-two</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-three</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-four</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-five</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-six</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-seven</div>

                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-eight</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Twenty-nine</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Thirty</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Thirty-one</div>
                                                                            <div><input type="checkbox" style="margin-right: 8px"/>Thirty-two</div>
                                                                        </div>

                                                                                        </td>
                                                                                </tr>
                                                                        </table>
                                        </div>
                                                        </td>
                                                </tr>
                                                <tr>
                                                        <td style="height:100%; width:100%">
                                                                <table style="height:100%; width:100%">

                                                                        <tr>
                                                                                <td style="height: 1px; padding: 3px">
                                                                                        <div  style="margin: 3px; padding: 3px; Border: 1px solid black; text-align: center; background-color:#808080">
                                                                                                <span style="font-family: Arial; font-size: 16px; font-weight: bold">lower td title</span>
                                                                                        </div>
                                                                                </td>
                                                                        </tr>
                                                                        <tr>

                                                                                <td style="height: 1px; padding: 3px; text-align:center">
                                                                                        <span style="padding-left:10px;padding-right:5px"><button>Button</button></span>
                                                                                        <span style="padding-left:5px;padding-right:10px"><input type="checkbox" id="A1"/><label for="A1">Checkbox</label></span>
                                                                                </td>
                                                                        </tr>
                                                                        <tr>
                                                                                <td>
                                                                                        <div style="height: 100%; overflow:auto">&nbsp;</div>

                                                                                </td>
                                                                        </tr>
                                                                </table>
                                                        </td>
                                                </tr>
                                        </table>
                                </td>
                                <td style="width:85%; height: 100%; margin: 0; padding: 0 0 0 2px;">
                                        <div style="border: 1px solid black; height: 100%; width: 100%">&nbsp;</div>

                                </td>
                        </tr>
                </table>
        </td>
    </tr>
</table>
</body>
</html>

Open in new window

0
 
olszowkaAuthor Commented:
I finally got it working and I managed to get rid of the tables, too.

Currently, this method has the limitation that the first n-1 rows or columns must be fixed and only the last can take up the remaining space, but it overflows correctly and works in ie9, firefox, chrome, and safari.


<!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=utf-8" />
      <title>Page Title</title>
</head>
<body style="margin: 0; padding: 0">
<div id="fullPageContainer" style="top:0; right:0; bottom:0; left:0; height:auto; width:auto; margin:0; padding:0">
    <div id="overallPageHeader" style="position: absolute; top:0; right:0; left:0; width:auto; margin:0; padding:0; background-color:#80ff90; text-align:center">
            <h1>Overall Page Header</h1>
      </div>
      <div id="mainContentContainer" style="position:absolute; top:79px; right:0; bottom:0; left:0; width:auto; height:auto; margin:0; padding:2px;">
          <div id="leftColumn" style="position:absolute; top:0; bottom:0; left:0; width:350px; height:auto; margin:2px; padding:0px; border: 1px solid black; ">
              <div id="upperLeftPanel" style="position:absolute; top:0; right:0; left:0; width:auto; height:45%; margin:0; padding:0; border-bottom: 1px solid black;" >
                      <div id="upperLeftPanelTitle" style="position:absolute; top:0; right:0; left:0; margin: 3px; padding: 3px; Border: 1px solid black; text-align: center; background-color:#808080;">
                            <span style="font-family: Arial; font-size: 16px; font-weight: bold">Upper Left Panel Title</span>
                      </div>
                      <div id="upperLeftPanelContents" style="position:absolute; top:28px; right:0; bottom: 0; left:0; height: auto; width: auto; margin: 3px; overflow: auto">
                    <div><input type="checkbox" style="margin-right: 8px"/>One</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Two</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Three</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Four</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Five</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Six</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Seven</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Eight</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Nine</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Ten</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Eleven</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Twelve</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Thirteen</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Fourteen</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Fifteen</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Sixteen</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Seventeen</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Eighteen</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Nineteen</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Twenty</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Twenty-one</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Twenty-two</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Twenty-three</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Twenty-four</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Twenty-five</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Twenty-six</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Twenty-seven</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Twenty-eight</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Twenty-nine</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Thirty</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Thirty-one</div>
                    <div><input type="checkbox" style="margin-right: 8px"/>Thirty-two</div>
                      </div>
              </div>
              <div id="lowerLeftPanel" style="position:absolute; top:45%; right:0; bottom:0; left:0; width:auto; height:auto; margin:2px 0 0 0; padding:0; " >
                      <div id="lowerLeftPanelTitle" style="position:absolute; top:0; right:0; left:0; margin: 3px; padding: 3px; Border: 1px solid black; text-align: center; background-color:#808080;">
                            <span style="font-family: Arial; font-size: 16px; font-weight: bold">Lower Left Panel Title</span>
                      </div>
                      <div id="lowerLeftPanelContents" style="position:absolute; top:28px; right:0; bottom: 0; left:0; height: auto; width: auto; margin: 3px; overflow: auto">
                            <span style="padding-left:10px;padding-right:5px"><button>Button</button></span>
                            <span style="padding-left:5px;padding-right:10px"><input type="checkbox" id="A1"/><label for="A1">Checkbox</label></span>
                      </div>
              </div>
          </div>
          <div id="rightColumn" style="position:absolute; top:0; right:0; bottom:0; left:354px; width:auto; height:auto; margin:2px; padding:0px; border: 1px solid black; ">
                  <div style="position:absolute; top:0; right:0; left:0; margin: 3px; padding: 3px; Border: 1px solid black; text-align: center; background-color:#808080;">
                        <span style="font-family: Arial; font-size: 16px; font-weight: bold">Right Panel Title</span>
                  </div>
          </div>
    </div>
</div>
</body>
</html>
0
 
olszowkaAuthor Commented:
Why is EE asking me to grade my own solution?
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now