auto expandable and scrollable div 2

Sleidia · Mar 22, 2007

Hi guys

How can I make a div vertically and horizontally expand to the maximum size of its container and also have scrollbars displayed when the container is scaled down?

The following works perfectly on IE but ...

On FF : the scoll bars aren't displayed at all.
On Opera : the scroll bars are displayed but the div expands outside its container (weird!).

Code:

#cust-bloc-main {

width: 100%;
height: 100%;
overflow: auto;

}

Thanks !

ca8msm · Mar 22, 2007

Seems to work fine for me:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
  <head>
    <title>Test Environment</title>
    <style type="text/css">

     * {padding:0; margin:0}

     #container {
	width:500px;
	height:500px;
	border:1px solid Black;
	}

     .expanded {
	width: 100%;
	height: 100%;
	border:1px solid Red;
	overflow: auto;
	}

    </style>
  </head>
  <body>
    <div id="container">
	<p class="expanded">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lacinia pretium risus. In quis erat. Sed et dui. Proin auctor, tellus vel dapibus sagittis, libero sapien venenatis nunc, ut pellentesque dolor quam quis est. Nullam adipiscing, arcu ac accumsan mollis, massa ligula bibendum leo, vel auctor augue magna nec risus. Sed vitae nisi ut dui ultrices pretium. Nullam tortor nisl, condimentum ut, aliquet sed, imperdiet eu, erat. Phasellus suscipit. Vestibulum sem. Integer aliquam venenatis justo. In vitae odio at turpis suscipit feugiat. Proin luctus nisl a odio.

Morbi mollis viverra ante. Suspendisse lacinia lacinia tortor. Nullam sed odio. Morbi mi. Maecenas hendrerit. Suspendisse ipsum. Suspendisse potenti. Nulla facilisi. Aliquam semper nisl ac metus. Cras in massa sed sem ullamcorper placerat.

Integer et eros. Praesent pharetra, metus in condimentum laoreet, nunc pede gravida nisi, et tempor urna justo et nunc. Duis rhoncus, metus vel placerat pretium, nisl felis nonummy erat, sit amet molestie velit tellus non tortor. Cras porta est vel mauris. Vestibulum tincidunt, justo ac sollicitudin ultrices, mi magna posuere quam, ut sagittis mauris felis id neque. Etiam sed tortor. Phasellus mollis tempus arcu. Donec sit amet quam ac risus rutrum molestie. Nam dolor. Phasellus ut nulla. Morbi sit amet turpis.

Sed nonummy. Suspendisse ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas mattis consectetuer lacus. Integer ultrices nunc ullamcorper lacus. Proin ac mi id felis tempus eleifend. Sed in sem et erat faucibus commodo. Vivamus congue, velit et scelerisque pretium, libero orci facilisis felis, in adipiscing massa justo vitae sem. Aenean metus neque, iaculis quis, ornare ut, interdum pulvinar, ligula. In ac pede vel nibh tempus rhoncus. Donec dictum rhoncus lectus. Aenean nunc urna, convallis a, sollicitudin in, volutpat et, justo. Suspendisse nec nisi. Vestibulum dolor.

Donec pulvinar. Nullam et justo at urna laoreet feugiat. Fusce metus. Quisque lacinia. Suspendisse potenti. Maecenas pharetra massa id urna. Pellentesque ut enim in nisl blandit pharetra. In posuere tempus tellus. Mauris dictum. In nulla. Sed ac augue. Vestibulum vel quam.

	</p>
    </div>
  </body>
</html>

Have you declared your DOCTYPE?

____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244 on how to get better results.

Sleidia · Mar 22, 2007

Hi ca8msm,

Your example works because you're using <p> with a class.
( works even without the doctype ).

I need to have it work with <div>.
So, "expanded" should be a <div> area instead.

Thanks again

ca8msm · Mar 22, 2007

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
  <head>
    <title>Test Environment</title>
    <style type="text/css">

     * {padding:0; margin:0}

     #container {
	width:500px;
	height:500px;
	border:1px solid Black;
	}

     .expanded {
	width: 100%;
	height: 100%;
	border:1px solid Red;
	overflow: auto;
	}

    </style>
  </head>
  <body>
    <div id="container">
	<div class="expanded">
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lacinia pretium risus. In quis erat. Sed et dui. Proin auctor, tellus vel dapibus sagittis, libero sapien venenatis nunc, ut pellentesque dolor quam quis est. Nullam adipiscing, arcu ac accumsan mollis, massa ligula bibendum leo, vel auctor augue magna nec risus. Sed vitae nisi ut dui ultrices pretium. Nullam tortor nisl, condimentum ut, aliquet sed, imperdiet eu, erat. Phasellus suscipit. Vestibulum sem. Integer aliquam venenatis justo. In vitae odio at turpis suscipit feugiat. Proin luctus nisl a odio.

Morbi mollis viverra ante. Suspendisse lacinia lacinia tortor. Nullam sed odio. Morbi mi. Maecenas hendrerit. Suspendisse ipsum. Suspendisse potenti. Nulla facilisi. Aliquam semper nisl ac metus. Cras in massa sed sem ullamcorper placerat.

Integer et eros. Praesent pharetra, metus in condimentum laoreet, nunc pede gravida nisi, et tempor urna justo et nunc. Duis rhoncus, metus vel placerat pretium, nisl felis nonummy erat, sit amet molestie velit tellus non tortor. Cras porta est vel mauris. Vestibulum tincidunt, justo ac sollicitudin ultrices, mi magna posuere quam, ut sagittis mauris felis id neque. Etiam sed tortor. Phasellus mollis tempus arcu. Donec sit amet quam ac risus rutrum molestie. Nam dolor. Phasellus ut nulla. Morbi sit amet turpis.

Sed nonummy. Suspendisse ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas mattis consectetuer lacus. Integer ultrices nunc ullamcorper lacus. Proin ac mi id felis tempus eleifend. Sed in sem et erat faucibus commodo. Vivamus congue, velit et scelerisque pretium, libero orci facilisis felis, in adipiscing massa justo vitae sem. Aenean metus neque, iaculis quis, ornare ut, interdum pulvinar, ligula. In ac pede vel nibh tempus rhoncus. Donec dictum rhoncus lectus. Aenean nunc urna, convallis a, sollicitudin in, volutpat et, justo. Suspendisse nec nisi. Vestibulum dolor.

Donec pulvinar. Nullam et justo at urna laoreet feugiat. Fusce metus. Quisque lacinia. Suspendisse potenti. Maecenas pharetra massa id urna. Pellentesque ut enim in nisl blandit pharetra. In posuere tempus tellus. Mauris dictum. In nulla. Sed ac augue. Vestibulum vel quam.

	</div>
    </div>
  </body>
</html>

It seems to work fine if I change the paragraph to a div (see above). However, it falls over in IE6 and IE7 if you remove the doctype.

____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244 on how to get better results.

Sleidia · Mar 22, 2007

BTW, now it work like IE on Opera thanks to ths change :

Code:

#cust-bloc-main {

width: 100%;
height: 90%;
overflow: auto;

}

FF can display the scroll bars but the content of the div make the div larger than its container.

Sleidia · Mar 22, 2007

Ok, I've tried your last example and it doesn't work on my side even with the doctype specified.

I think I know the reason : on my side, the container is a table cell :

Code:

...
    <tr>
    <td valign="top">

        <!-- content start -->

        <div id="cust-bloc-main">

	</div>

        <!-- content end -->

    </td>
...

Looks like divs in FF can't adjust properly to a table cell.

And since I absolutely need to use a table for a complex layout that can scale itself ...

ca8msm · Mar 22, 2007

Fair enough...enjoy the ride down the slippery slope of problems that your tables are causing [wink]

____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244 on how to get better results.

Sleidia · Mar 22, 2007

Honestly, do you think that it's possible to make a tableless version of this layout? :

Code:

<body>

<center>

    <table width="100%" height="96%" border="1">
    
    <tr valign="top" height="20">
    <td rowspan="2" width="150">
    
        <!-- nav_left start -->
        
        Flags
        
        <br />
        <br />
        
        LOGO
	
        <br />
        <br />
        
        <div id="cust-nav-left">
        
        ------------<br />
        ------------<br />
        ------------<br />
        ------------<br />
        ------------<br />
        ------------<br />  
        
        </div>
        
        <!-- nav_left end -->

    </td>


    <td colspan="2" align="right">
    
        <!-- nav_top start -->
        
        ------------ |  ------------ |  ------------ |  ------------ |  ------------   
        
        <!-- nav_top end -->

    </td>
    </tr>    
    
    <tr>
    <td valign="top">

        <div id="cust-bloc-title">
        ---------------------------------------------------
        </div>

        <!-- content start -->

        <div id="cust-bloc-main">
        
        -------------------------------------------------------------------------<br /> 
        -------------------------------------------------------------------------<br /> 
        -------------------------------------------------------------------------<br /> 
        -------------------------------------------------------------------------<br /> 
        -------------------------------------------------------------------------<br /> 
        -------------------------------------------------------------------------<br /> 
        -------------------------------------------------------------------------<br /> 
        -------------------------------------------------------------------------<br /> 
        -------------------------------------------------------------------------<br /> 
        -------------------------------------------------------------------------<br /> 
        -------------------------------------------------------------------------<br /> 
        -------------------------------------------------------------------------<br /> 
        
      	</div>

        <!-- content end -->

    </td>

    <td width="350" valign="top">
    
        <!-- nav_right start -->
        
        <table width="100%" height="200" border="1">
        
        <tr>
        <td align="center" valign="middle">AREA 1</td>
        <td><table width="100%" height="100%" border="1">
        
           <tr>
           <td align="center" valign="middle">AREA 2</td>
           <tr>
           
           </tr>
           <td align="center" valign="middle">AREA 3</td>
           </tr>
        
        </table></td>
        </tr>
        
        </table>
        
        <table width="100%" border="1">
        
        <tr>
        <td align="center" valign="middle">
        
        AREA 4
        
        </td>
        </tr>
        
        </table>        

        <!-- nav_right end -->
    
    </td>
    </tr>

    </table>

	<!-- nav_bottom start  -->

	<table cellpadding="0" cellspacing="0" border="0" width="100%">

	<tr>
	<td width="150"></td>
	<td align="center">
    
  ------------ |  ------------ |  ------------ |  ------------ |  ------------  
        
	<td width="350"></td>
	</tr>
        
	</table>

	<!-- nav_bottom end  -->

</center>

</body>

Foamcow · Mar 22, 2007

Absolutely yes.

Do you have a version online with graphics etc?

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

ca8msm · Mar 22, 2007

Honestly, yes I do. From what I can see you have standard two column layout with a footer. Inside the right hand column you would have some elements floated to the right. There would then be two div's underneath (with one floated to the left). You could again use floats to position your "Areas 1-4".

I'm not going to preach to you about how you should be using this method though as I think you've decided you won't be. However, the lack of doctype coupled with these nested tables are probably the main reason why your CSS doesn't always work as expected. You'll simply have to find different workarounds to the methods that we would normally suggest.

____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244 on how to get better results.

Sleidia · Mar 22, 2007

The layout doesn't have any graphic yet.
I'm working only with the skeleton posted above.

Anyway, I had a look here :

http://www.tjkdesign.com/articles/one_html_markup_many_css_layouts.asp

I've tested one of the proclaimed "fluid" layout.
Too bad they aren't fluid vertically.

If you open the skeleton above in a browser, you'll see that it's fluid horizontaly and vertically.

I doubt that a tableless layout could do that.

ca8msm · Mar 22, 2007

I doubt that a tableless layout could do that.

Why? Just because the example you've looked at doesn't do it, you shouldn't assume it isn't possible.

What are you trying to do with your layout anyway? Is it supposed to be 100% in height but expand vertically if more information is placed in the main section?

____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244 on how to get better results.

Foamcow · Mar 22, 2007

I doubt that a tableless layout could do that.

And I would expect that's because you are thinking about the construction in terms of tables and cells.

Using CSS layouts, containers will only expand as much as they need to. In fact, it's the same with table cells. However with cells you can apply %age heights.
You can achieve the same kind of thing using CSS layouts, it's just a matter of thinking about it differently.

Anyway, your original page isn't 'fluid vertically' or else I misunderstood what you meant by that term.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

Sleidia · Mar 22, 2007

What are you trying to do with your layout anyway? Is it supposed to be 100% in height but expand vertically if more information is placed in the main section?

Anyway, your original page isn't 'fluid vertically' or else I misunderstood what you meant by that term.

In my layout above, the content area takes all the available space vertically, even if it has little content. And the footer always remains at the bottom of the window independently of the content's size.

ca8msm · Mar 22, 2007

OK, and what happens if the content expands? Do you want the whole structure to expand as well?

____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244 on how to get better results.

Foamcow · Mar 22, 2007

Your layout doesn't take up the available vertical space as far as can see.

I copy/pasted your code into a page with a proper doctype etc and it just expanded horizontally.

Anyway... I had a spare half hour (no, really)
I knocked this up, but I've only tested it in Mac FF and IE6 for XP. It still needs work, but I'm confident I could get it to do what you wanted.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />

	<title>Tableless layout</title>

	<style type="text/css">
		/*<![CDATA[*/
		
		* {
			margin:0;
			padding:0;
		}
		
		
		#wrapper {
			min-width:561px;
		}
		
		#left {
			height:100%;
			width:20%;
			float:left;
		}
		
		#top {
			text-align:right;
		}
		
		#innerWrapper {
			height:100%;
		}
		
		#innerRight {
			margin-left:20%;
			height:100%;
		}
		
		#main {
			float:left;
			width:60%;
		}
			
			#main p {
			
			}
		
		#areas {
			position:relative;
			float:left;
			width:40%;
			height:100%;
		}
		
			#area1 {
				width:50%;
				float:left;
			}
			
			#areaWrap {
				height:100%;
				width:50%;
				float:right;
			}
			
			#area2 {
			}
			
			#area3 {
			}
			
			#area4 {
				clear:both;
				background-color:red;
			}
		
		#footer {
			clear:both;
			text-align:center;
		}
		/*]]>*/
	</style>
</head>

<body>


<div id="wrapper">
	<div id="left">
		Left<br />
		
	</div> <!-- end left -->
	
	
	
	<div id="innerWrapper">
		<div id="innerLeft">
		
		</div> <!-- end innerLeft -->
		
		<div id="innerRight">	
			<div id="top">
				top
			</div> <!-- end top -->	
			
			<div id="main">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div> <!-- end main -->
			
			<div id="areas">
				<div id="area1">
					Area 1
					
				</div> <!-- end area1 -->
				
				<div id="areaWrap">
					<div id="area2">
						area2
					</div> <!-- end area2 -->
			
					<div id="area3">
						area3
					</div> <!-- end area3 -->
				</div> <!-- end areaWrap -->
			
				<div id="area4">
					area4
				</div> <!-- end area4 -->
			</div> <!-- end areas -->
		</div> <!-- end right -->
	</div> <!-- end innerWrapper -->
	<div id="footer">
	Footer
	</div> <!-- end footer -->
</div> <!-- end wrapper -->

</body>
</html>

It could also probably be rationalised down a fair bit too.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

Sleidia · Mar 22, 2007

On my layout, can't you see the footer at the very bottom of the window and the content area reaching the footer??

Thanks for your time, but yours doesn't do that

Anyway, I'm trying to see if I can come up with something.

Foamcow · Mar 22, 2007

I see the footer but it's directly beneath the main content exactly as I said.

Here's a screengrab

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

Sleidia · Mar 22, 2007

Does it mean that a Mac doesn't understand something as simple as a table set to 96% of height??

I mean, I've tested my layout on IE, FF and Opera on XP.

Foamcow · Mar 22, 2007

Have you specified a DocType?

Bear in mind that you only posted the body of the HTML

I put that into an XHTML 1.1 document and what i showed you is the result.

I can confirm it looks the same in IE6 under Win2000 and FF, IE7 under XP

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

auto expandable and scrollable div 2

Technical User

Programmer

Technical User

Programmer

Technical User

Technical User

Programmer

Technical User

Programmer

Programmer

Technical User

Programmer

Programmer

Technical User

Programmer

Programmer

Technical User

Programmer

Technical User

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor