CSS - Stretch An Element

right....

i have two fixed width columns and i want them to be the same height - the height of whichever has the most content. so i figured i do something like:


+---------------------+
| +-----+ +----+ |
| | | | | |
| | | | b | |
| | a | | | |
| | | +----+ |
| | | |
| +-----+ |
+---------------------+


(OK - problems with spaces and non breaking thingy.. do you get the idea though? )

the container div will stretch to fit the content, divs a and b will increase in height depending on content. so i was thinking if i set divs a and b to be 100% height it would work. however, this will do nothing if i haven't defined the height of the parent (container). so i think, ok, i'll set that to 100% as well. however this does not work. when i say "does not work" i mean the following:

my container div fills the viewport. the column divs stretch from the bottom to the top of the page. -- all ok this far.

when i add a load of content, i the div (a or b) will stretch beyond the viewport BUT the other one doesn't.

now.. does anyone have any ideas of how i could do this? has anyone seen this anywhere? any help appreciated.

d

I feel so STUPID.

I have DIV[a]

inside DIV[a] is DIV[z]

DIV[z] is 200px high.

there is no height attribute et for DIV[a]

shouldnt DIV[a] stretch atleast to fit in DIV[z]

You can see here, in firefox, the dark background only comes
down 200px. That is because its height is at 200px, i did that
so you could see it. If I remove the height attribute, it
dissapears completley. The menu and such on the left are within this div, so it should stretch correct?

It works fine in IE.

If I need to explain more let me know.

Thanks

Can someone please tell me what the font-stretch property within CSS does? I have been playing around with the following online example, but the way the text is rendered never changes.

[access the world wide web]w3schools.com/js/tryit.asp?filename=try_dom_style_fontstretch

Could someone please tell me how to use the font-stretch property? I am just trying to see what it does.

Thank you!

Hi,

Just wondering if anyone can tell me how i would go about stretching a background image for my website so as it stretches with different page sizes and resolutions an all the rest

I am working on this template: http://www.oswd.org/design/preview/id/2790 & I need both the white & green content boxes to stretch as I add content. I don't know if this is even possible but would like to know if there is an easier way than having to create another (more stretched) image. Also as the content will be changing frequently I don't want to have to change from one image to another if I can help it.

Appreciate any help you can give.

http://www.ourdayton.com/index.html?do=regUser

reffering to the dark blue box with the form contained in it:

With the width set to default, or width:auto, it stretches to fit the parent.

If I specify a width, the box will not stretch to hold the content within it. I've also played with min-width/max-width to no avail.

I'm sure im just missing/forgetting a property.

Here is the code for the box:
Code:

#generalBox{
    width: auto;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 8px 8px 8px;
    border: 1px solid #525c69;
    background-color: #212a34;
    text-align: center;
}

The font-stretch property, for example: css Code:
Original - css Code font-stretch: condensed;

  

 font-stretch: condensed; 

doesn't seem to be adequately supported by most browsers, even though it has been part of CSS 2 for quite a while. Most references I checked seemed to point to system font dependency, i.e., if your system does not have a condensed or expanded version of that particular font installed, no change in font width will appear. Why is this? Microsoft Word has an algorithm to stretch and condense all fonts, not just those with special versions. Why can't the css standard use a similar display algorithm to implement font-stretch?

Ok, I have a gradient and i'm using it as the background for a <div> I want the whole background to show. So it's always dark at the bottom and light at the top. I have my image gradient.jpg and I want it to stretch or shrink vertially but repeat horizontally.


Heres what I have:
Code:

<style type="text/css">
<!--
div {
width: 50%;
height: 50%;
background-image: url(background.jpg);

}
-->
</style>

Like that it will only display half of the gradient if the gradient is longer than 50% of the page.

I want it to stretch or shrink the image so that the whole gradient is displayed.

I tried using the background-size: 100% attribute but it diddnt do anything :-\

Thanks for any help.

i put a div container around all my divs (so i could center them and put a bg and border) and put height at 100% but it only stretches from the top of the viewable page to the bottom. if a text content div stretches beond the page (and i have to scroll) the main content div cuts off. i set body height to 100% also. i cant figure out a way around this other than set the height in PX but since the content will be includes i have no way of know how much will be on each page. is there anyway around this, even if i have to use tables.

I can only get my page to display correctly in IE6. Not IE7 or Firefox. If anyone could help, it'd be much appreciated!

Basically, the borders on the left/right don't stretch all the way down the page in IE7 and Firefox (like they do in IE6).

Here is the website:

http://www.stacyandmatt.com/

Here's the simple HTML:

Code:

<body>
<div id="container">
	<div id="maincontent">
    	<div id="header">
	  		<p>&nbsp;</p>
		</div>
        <div id="navBar">
        	<p>&nbsp;</p>
		</div>
        <div id="mainRight">
        	<img src="images/mainPic.jpg" />
		</div>
        <div class="spacer">&nbsp;</div>
    </div>
</div>
</body>

And here is the CSS:

Code:

html, body {
	background: #000;
	font-family: Arial, Helvetica, sans-serif;
	padding: 0;
	margin: 0;
	color: #F09;
	height: 100%;
	line-height: 1.5em;
}

#container {
	background: #000;
	height: 100%;
	width: 780px;
	margin:auto;
	padding: 0;
	text-align: justify;
}

#maincontent {
	background: #000 url(../images/borderTest.jpg) repeat-y top left;
	height: 100%;
	margin: 0px;
	padding: 0px;
	width: 100%;
	border-right: 6px solid #F09;
	overflow: visible;
}

#header {
	background: url(../images/header.gif) no-repeat top left;
	width: 100%;
	height: 141px;
	margin: 0px;
	padding: 0px;
}

#navBar {
	width: 155px;
	float: left;
	padding: 20px 0px 0px 40px;
	margin: 0px;
	color: #000000;
}

#mainRight {
	width: 555px;
	float: right;
	padding: 20px 5px 0px 5px;
	margin: 0px;
}

.spacer {
	clear: both;
}

Thanks!

Hi there,

I'm having trouble (right now Im just trying to get firefox to work) getting my #content div to stretch completely vertically. The #main div is stretching correctly, I figured I'd be able to use the same code to get the #content div to stretch. TIA - Mark

HTML

Code:

<!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>{$title}</title>

<link rel='stylesheet' href='/css/core2.css' type='text/css' />

</head>

<body>
	
	<div id="main" >
		<img src="/images/left_shad_top.png" id="left" alt="left shader" />
			<div id="content">
			
				test
			</div><!-- end of content -->
		
		<img src="/images/right_shad_top.png" id="right" alt="right shader" />
		<div style="clear:both;"></div>
		<img src="/images/bottom.jpg" id="bottom"/>
	</div> <!-- end of main div -->
	
</body>
</html>

My CSS

Code:

*{
margin: 0;
padding: 0;
}

html{
background-color: red;
}

body{
height: 100%;
background-color: blue;
margin: 0 auto;
}

#main{
min-height: 100%;
background-color: yellow;
width: 850px;
background-image: url( '/images/shad_repeat.png');
background-repeat: repeat-y;

}

#content{
width: 695px;
background-color: green;
min-height: 100%;
float: left;
background-image: url('/images/page.gif');
background-color: #dcdbdc;
background-repeat: repeat-x;
}

#left{
float: left;
}
#right{
float: right;
}

#bottom{
margin-left: 50px;
}

Hello,

I have been playing with this for a few days now and I am completely frustrated.

The left side bar and the right side bar I need to auto stretch. I veiwed everything in several different browsers and screen resolutions. I orginally hade a body background picture and it worked perfectly except on firefox at 800x600. It was left aligned instead of centered.

So.. I made the backrounds and border colors instead. Now the problem is I cannot get them to auto strech - I am very frustrated. It seems to be all messed up in IE5.5 at 800x600.

Can anyone take a look and help me? Thanks in advance!
If you need the html - I would be glad to provide it.

Here is the css file:

body {
margin: 0px;
padding: 0px;
background: #666666 url(images/back.png) repeat-y center top;
text-align: justify;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}

h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", Times, serif;
color: #3399FF;
}

a {
font-weight: bold;
text-decoration: none;
color: #33CCFF;
}

a:hover {
text-decoration: underline;
color: #33CCFF;
}

/************* HEADER STUFF ************/

#header {
width: 995px;
height: 200px;
margin: 0px auto;
padding: 0px 0px;
background: yellow;
}

#header2 {
width: 995px;
height: 10px;
margin: 0px auto;
padding: 10px 0px;
background: yellow url(images/header.jpg);
}

#header h1 {
margin: 0px;
padding: 0px 0px 0px 10px;
text-align: left;
color: #3399FF;
font-size: 3em;
text-transform: uppercase;
}

#header h2 {
margin: 0px;
padding: 0px 0px 0px 20px;
text-align: left;
font-size: 1.5em;
text-transform: uppercase;
}


/************* MENU ************/

#menu {
width: 995px;
margin: 0px auto;
padding: 5px 0px 5px 0px;
background-color: #000000;
height: 28px;
}

#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
margin-top: 12px;
}

#menu li {
display: inline;
}

#menu a {
padding: 5px 19px;
text-transform: uppercase;
text-decoration: none;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
}

#menu a:hover {
background-color: #333333;
}

/************* CONTENT ************/

#content {
width: 995px;
margin: 0px auto;
padding: 0px 0px 0px 0px;
}

#content h2, #content h3, #content h4, #content h5, #content h6 {
font-weight: normal;
}

#content p, #content ul, #content ol {
line-height: 150%;
}

#left {
float: right;
width: 680px;
padding: 0px 20px 40px 20px;
}

#right {
float: left;
width: 230px;
padding: 0px 20px 40px 20px;
color: #99CCFF;
}

/************* FOOTER ************/

#footer {
clear: both;
width: 995px;
margin: 0px auto;
border-top: 1px solid #666666;
background: red repeat-y center top;
font-size: 9px;
text-align: center;
padding: 2px;
color: #333333;
}

#footer2 {
clear: both;
width: 995px;
margin: 0px auto;
border-top: 1px solid #666666;
background: blue repeat-y center bottom;
font-size: 9px;
text-align: center;
padding: 0px;
color: #333333;
height: auto;
}

I want to have a DIV stretch to cover the entire screen, regardless of the user's resolution. Can this be done?

Is it somehow possible to stretch a containing (relatively positioned) div vertically around its child p's, which are absolutely positioned, without setting the height of the parent? I have tried the following code, which - obviously - does not work:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> 
<title></title>
</head>

<body>
<div style="position: relative; width: 764px; border: solid 1px #C63949; background-color: grey;">

<p style="position: absolute; left: 255px; top: 29px; width: 164px; height: 113px; background-color: orange;">
</p>

<p style="position: absolute; left: 25px; top: 27px; width: 198px; height: 175px; background-color: blue;">
<a title="x.jpg" href="x.jpg">
<img alt="x.jpg" src="x.jpg"/>
</a>
<br/>
<strong>description</strong>
</p>

<p style="position: absolute; left: 255px; top: 151px; width: 168px; height: 164px; background-color: red;">
another div
</p>

<p style="position: absolute; left: 436px; top: 34px; width: 238px; height: 138px; background-color: green;">
<a title="y.jpg" href="y.jpg"><img alt="y.jpg" src="y.jpg"/>
</a>
</p>

<p style="position: absolute; left: 29px; top: 220px; width: 182px; height: 153px; background-color: yellow;">
<a title="z.jpg" href="z.jpg">
<img alt="z.jpg" src="z.jpg"/>
</a>
<br/>
<strong>description</strong>
</p>

testing testing testing
</div>
</body>

</html>

The problem is, I am using a online editor which creates the code for the child. I cannot change that css code. I am able to add to it, or change the css for the parent. If you have a suggestion how I can stretch the containing div, so it goes just below the lowest p, I would be very happy!

EDIT: I just read on http://css-discuss.incutio.com/?page=AbsoluteOrFloatLayout

"There is no way to instruct other parts of the page to start or end with respect to the absolutely positioned element"

If this is true, than is there another way I can solve this problem?

i want to make a word Stretch across a givin width... when ever i set it to expanded, wider, or any of the others... nothing happens to the text.. does anyonw know how this works?