Using DIVs To Make BGColor Work

**mattbaehr** · Oct 22, 2010 09:30

My test site is: http://ae.windridgewebdesign.com/

In this Wordpress driven site, if the sidebar isn't as long as the content, the bgcolor will not go all the way down. I added another div and made the bgcolor the same as my sidebar bgcolor so that the column goes all the way to the bottom. This looks like how I want it to on the homepage.

However, if you go to an interior page that isn't as long as the sidebar, you get the sidebar bgcolor on the main content side. I have tried a ton of different things to try to get it to work, with no luck. I really don't want to use BG images if I can avoid it.

Any ideas?

**TommiChi** · Oct 22, 2010 13:29

An option you could try is to set the "main" height to 100% and the sidebar height to 100% also, which would force it to stretch across the entire length of the main container

**rguy84** · Oct 22, 2010 13:36

You need to set all div's from html down to min-height: 100%

**mattbaehr** · Oct 22, 2010 13:44

Thanks guys, but still no luck.

**TommiChi** · Oct 22, 2010 14:08

I put together a very simple and rough example to illustrate my point:

Code:

<html>
<head>

<style type="text/css">
#header
{
width:100&#37;;
height:100px;
background:#ff0000;
}

#main
{
width:100%;
height:100%;
background:#000000;
}

#content
{
width:400px;
height:100%;
background:#ccff00;
float:left;
}

#sidebar
{
width:100px;
height:100%;
background:#ffcc00;
float:left;
}
</style>

</head>
<body>

<div id="header">
</div>

<div id="main">

<div id="content">
Lorem Ipsum<br/>
Lorem Ipsum<br/>
Lorem Ipsum<br/>
</div>

<div id="sidebar">
</div>


</div>

</body>
</html>

You might want to consider that it is your markup that needs to be rewritten for your CSS to do what you want it to do....

**rguy84** · Oct 22, 2010 14:10

Which elements did you apply it to?

Try

Code CSS:

html, body, div.hfeed, div#wrapper,
div#main, div#sidebarbg, div#container,
div#content { min-height:100&#37;; }

put that at or near the top of your css

**mattbaehr** · Oct 22, 2010 14:24

I will play more with the markup. I realize there may be some changes that need to be made there. But I am trying to do it with a Wordpress theme so finding everything in the right spot without messing up other things is the tough part.

As for the CSS, I have added the min-height everywhere, but no luck.

**rguy84** · Oct 22, 2010 14:38

There is nothing truely special about WP, it is still a simple page split up... so if you are that hung up on it being a theme, open a page, save it locally and mess with it. once you got it to work, see what changes you made and plug them into the correct theme files.

I don't mean that rudely.

**Paul O'B** · Oct 22, 2010 15:17

Hi,

Sorry guys but you are all barking up the wrong tree here and that approach won't work

Originally Posted by TommiChi

I put together a very simple and rough example to illustrate my point:

That won't work at all I'm afraid as you cannot set any fluid elements to 100% height because that means that first they must have a parent with a known height (not content height) and if indeed they do have a parent of known height then you have effectively trapped your content in a 100% high container that can never expand. Just add content to go below the fold in any of your columns to see why this won't work.

The CSS faq explains 100% height in detail and why you can never use it like this.

You may think that you could use min-height:100% instead but that won't work either for multiple nested elements. You can effectively only ever have one min-height:100% nested element as a child cannot base its height on a parent that is defined by min-height - the height collapse to auto. You could have separate (non nested) elements basing their height off html,body set to 100% but that won't mean that the columns will equalise. It just means that initially they will extend to the bottom of the view port but when one grows the others won't follow and you are back to square one

. It's a catch 22 situation.

Read my article on equal columns for a better understanding.

The easiest solution is to create a background gif in the side columns color and just repeat it on the parent that is holding both columns (the image would be as wide as the side column and about 10px high. You should also include the side border on the column). Give that parent a background color also and you will get your two equal columns very easily (called faux columns).

The other alternatives are negative margin techniques that complicate the mark up a little or my absolute column overlay technique which means adding extra mark up.

**mattbaehr** · Oct 22, 2010 18:40

Wow, Paul. Thanks for taking the time to write such a detailed response. That is great information and wonderful links. Cheers.

**mattbaehr** · Oct 26, 2010 13:57

Paul -

I must be doing something wrong. I have cleaned up my markup and added the bg image to the parent, but it isn't showing up. I have looked at it every which way and can't figure out why it isn't there. I tried to change a few attributes to make it easier to identify, but still can't seem to get it.

Any ideas?

**Paul O'B** · Oct 26, 2010 14:35

The path to the image is wrong.

Code:

#main {
background:url("sidebarbg.gif") repeat-y  right top

The image seems to be here.

Code:

#main {
background:url("/sidebarbg.gif") repeat-y right top

**mattbaehr** · Oct 27, 2010 07:23

OMG, thanks. I am embarrassed. I must have overwritten the / by accident. Thanks again. Working like a charm now.

User Tag List

Thread: Using DIVs To Make BGColor Work

Thread Tools

Display

Using DIVs To Make BGColor Work

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions