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!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

auto expandable and scrollable div 2

Status
Not open for further replies.
Sleidia

Sleidia

Technical User
May 4, 2001
1,284
FR
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 !
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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 :)
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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 ... :(
 
Upvote 0 Downvote
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>
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
The layout doesn't have any graphic yet.
I'm working only with the skeleton posted above.

Anyway, I had a look here :
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.
 
Upvote 0 Downvote
I doubt that a tableless layout could do that.
Click to expand...
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.
 
Upvote 0 Downvote
I doubt that a tableless layout could do that.
Click to expand...
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
 
Upvote 0 Downvote
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?
Click to expand...

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

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.

 
Upvote 0 Downvote
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
 
Upvote 0 Downvote

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.
 
Upvote 0 Downvote
I see the footer but it's directly beneath the main content exactly as I said.

Here's a screengrab

sleidalayout.jpg


<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
751
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
198
lmcate
lmcate
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
617
PeDa
PeDa
tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
592
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
182
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top