background height auto expand

**JohansonevR** · Mar 1, 2011 10:58

hi,
i have this page.
screenshot
I want the background to expand downwards automatically as more content is added.
i have coded it like this

Code:

.contentWrapper{ 
  min-width:100%;
  min-height:100%;
}
...
/*1-Background*/
.main-content {
	background-color:white;
	width:950px;
	height:100%;
	position:relative;
	top:265px;
	left:150px;
	z-index:0;
	}
...
/*Preview Posts */
.previewPost{	/*Background and Container*/
	position:relative;
	top:380px;
	left:15px;
	background-color:#EEEEEE;
	height:700px;
	width:610px;
	border:1px solid #BBBBBB;
	}
...

So the 1st is for the background(white).
The 2nd is for the container that is going out a little bit downwards.
My html basically looks like this

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" xml:lang="en" lang="en">
<div class="contentWrapper">
...
    <div class="main-content">
...
    	<div class="previewPost">
        ...
        </div>
...
     </div>
</div>

Any ideas how to fix this ?

**Paul O'B** · Mar 1, 2011 13:48

Hi,

I can't really see what you are trying to do with that snippet but it's unlikely to work anyway as you can't use position:relative like that to lay out a site.

Position:relative doesn't move anything physically it only moves things visually. The element still maintains its original position in the flow of the document as far as everything else is concerned (that is to say that the space it previously occupied is always preserved resulting in holes in the page that don't get filled in).

That means you can't use it for structural positioning like that and indeed it was not meant for that purpose.

You need to maintain the flow of the document and move things around with margins instead. If you want horizontal alignment then you need to float the elements but remember to clear the floats afterwards if you want the parent to encompass them.

There wasn't really enough for me to go on in the snippet you provided but I can also tell you that the height:100% you are using is not viable either. You can't base 1000% height on nothing. It can only be base on an element that has a height defined other than by its content. Even if you do define a parent with a ficed height then effectively the 100% height traps all the elements inside and they nan never expand. Neither can you base min-height:100% on a parent that doesn't have a height defined. Both will fail and revert to height:auto.

It's unclear why you were using them anyway so just remove them.

Don't apply a fixed height to elements that hold fluid content either. In most cases you would avoid applying a height at all and let the ocntent dictate the height so that content can grow and text could be resized without breaking out.

I'm not sure where that leaves us with your layout but you end up with just this code.

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/*1-Background*/
.main-content {
    background:red;
    width:950px;
    margin:auto;
    padding:265px 0 0;
}
/*Preview Posts */
.previewPost {    /*Background and Container*/
    position:relative;
    background:#eee;
    width:610px;
    border:1px solid #bbb;
}
</style>
</head>
<body>
    <div class="main-content">
        <div class="previewPost">
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
            <p>Content</p>
        </div>
    </div>
</body>
</html>

Of course that means nothing unless we see what you want exactly. Perhaps it would be more productive if we could see the whole page html and css or perhaps a visual of some kind showing what you need to do.

In your tinypic it looks like you just want a 2 column layout which would mean floating two columns with appropriate widths and then making sure there is a clearing mechanism on the parent.

**JohansonevR** · Mar 2, 2011 06:16

listening to what you've said - , i've removed the position:absolute properties and setted margins instead, and a float property. Now it works fine but i have another problem. The footer is not aligning properly.

Code:

.footer{	
	background-image:url("../../images/footer-bg.png");
	height:70px;
	/*background-repeat:repeat-x;*/
	position:absolute;
	left:0%;
	bottom:0px;
	width:100%;
	}

have a look click
Note: Works fine in Chrome and FF3.6

**JohansonevR** · Mar 3, 2011 09:43

nevermind , i've recoded the page from start and fixated the errors.

**Paul O'B** · Mar 3, 2011 09:50

Sorry, I missed your post from yesterday I didn't get a notification. Glad you're sorted anyway.

User Tag List

Thread: background height auto expand

Thread Tools

Display

background height auto expand

Bookmarks

Bookmarks

Posting Permissions