4 replies [Last post]
TSemmes
Offline
Regular
Last seen: 7 years 12 weeks ago
Timezone: GMT-5
Joined: 2004-03-10
Posts: 35
Points: 40

I know this is a common topic and I have checked the How To. But after several hours of trying to make this work I am hoping that someone can locate what error I am making that is not making this work. I am creating this pages in Wordpress so this is causing additional confusion since I am a newbie with Wordpress.

But it seems that creating a content area and side bar that stretch to fill the space would still be workable.
This is an example of the page: http://www.eightfoldstrategy.com/communication/

I want the box around the content area to fill the available space. In those areas where the sidebar is shorter than the content area, i want the background texture to fill the space. (I am not going to worry if this doesn't work in IE6)

So in my searches it seems that this is the kind of CSS should work but it isn't. Any ideas why?
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}

#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
}

#container {
float: left;
width: 100%;
overflow: hidden;
margin: 0 auto -2em;
}

#content {
margin:9px 239px 9px 9px;
padding: 24px;
border: 1px solid #999;

}

#sidebar {
margin: 9px 9px 9px -300px;
padding: 15px;
background: url(images/rice_paper2.jpg);
width: 189px;
float: right;
}

#footer {
clear: both;
width: 100%;
padding: 20px;
height: 2em;

}
.push{
height: 2em;
}

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 5 years 15 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

Hello TSemmes,

I used to like that footer stick method with the push but this one is easier.
It's also using Faux Columns to make full height columns no matter what the content. The image used is creating a 3 column, you can easily replace that image for to make a 2 column.

TSemmes
Offline
Regular
Last seen: 7 years 12 weeks ago
Timezone: GMT-5
Joined: 2004-03-10
Posts: 35
Points: 40

I don't think this method

I don't think this method would work since I have a CSS border around the content area I want to expand to fit the browser window

TSemmes
Offline
Regular
Last seen: 7 years 12 weeks ago
Timezone: GMT-5
Joined: 2004-03-10
Posts: 35
Points: 40

I don't think this method

I don't think this method would work since I have a CSS border around the content area I want to expand to fit the browser window

Excavator
Excavator's picture
Offline
Enthusiast
Alaska
Last seen: 5 years 15 weeks ago
Alaska
Timezone: GMT-9
Joined: 2004-04-04
Posts: 121
Points: 60

.

Using that link I gave you, I put a border: 5px solid #000; on #wrap and it works in FF3.5, IE8 and IE7.

I'm not trying to convince you to switch methods though. The Faux Columns approach should work with your layout.