Using DIVs To Make BGColor Work

HTML & CSS
1

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?

2

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

3

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

4

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.

5

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.

6

Which elements did you apply it to?

Try


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

put that at or near the top of your css

7

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


<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…

8

Thanks guys, but still no luck.

9

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

10

Hi,

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

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.

11

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?

12

The path to the image is wrong.


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

The image seems to be here.


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

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