Welcome to the MacNN Forums.

MallyMal · Jul 7, 2004, 07:53 AM

Simple question, is there an equivalent to autostretching in CSS? I'm so, where can I find that info?

Thanks

Synotic · Jul 7, 2004, 08:40 AM

Originally posted by MallyMal:
Simple question, is there an equivalent to autostretching in CSS? I'm so, where can I find that info?

Thanks

What's autostretch?

MallyMal · Jul 7, 2004, 09:21 AM

Sorry, I get so used to Dreamweaver that I start using their terms as if they are actually proper.

Autostretch in Dreamweaver refers to making a table 100% the width of the browser window so it automatically stretchs to the size of the window.

I should have asked about ways of making liquid designs in CSS.

Turias · Jul 7, 2004, 09:23 AM

Check out the CSS Width Property.

MallyMal · Jul 7, 2004, 09:26 AM

Originally posted by Turias:
Check out the CSS Width Property.

Thank ya there!

ameat · Jul 7, 2004, 12:41 PM

also, note that block level elements generally always stretch 100% (except for tables i think...) the width of their containing element.

larkost · Jul 7, 2004, 01:03 PM

As ameat hinted, setting the "display" property to "block" usually will do what you want, but it does not quite the same as setting 'width="100%"'. Nor is setting the "width" attribute to "100%". With the latter some browsers will make the item the width of the entire browser, even if the item is enclosed by other items.

Here is a quick demo page that will get some of the concepts across:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
	<div style="background-color: lightblue;">
		div with nothing special
	</div>
	
	<br>
	
	<div style="display: table; background-color: lightblue;">
		div with display: table
	</div>
	
	<br>
	
	<div style="display: inline; background-color: lightblue;">
		div with display: inline
	</div>
	some text outside the div
	
	<br>
	<br>
	
	<div style="width: 100%; background-color: lightblue;">
		With width: 100%
	</div>
	
	<br>
	
	<div style="width: 100%; margin-left: 40px; background-color: lightblue;">
		With width: 100% and margin-left: 40px;
	</div>
	
	<p>
		Notice that in this last case that it causes the browser to have a horizontal 
scroll in Safari, no matter how wide you make the window.
	</p>
	
	<table border="1" style="">
		<tr>
			<td>another cell</td>
			<td><div style="width: 100%; background-color: lightblue;">
					Inside a table with width: 100%
			</div></td>
		</tr>
	</table>
	
	<p>
		Notice that this does not try and eat up all the space, but is contained by the 
div... I consider this anti-intuitive and att ods with the third example. I use this a lot to 
contain things in css... do a bunch of work, and then wrap it in a table. 
Sad, but it works.
	</p>
</body>

MallyMal · Jul 7, 2004, 09:27 PM

Thanks ameat and larkost!