Help with some advanced CSS

[soundman414]

So let me begin with that I am sort of new to html and css world. I have built a few sites in the past and that’s about it.

The project that I am working on now is to refresh my online portfolio site.

Here is the mockup of the site I am making [img]http://idisk.mac.com/marc.dostie//Public/mockup.png[/img]

With this design I have some tricky things I want to happen:
1. 100% x 100% stretched background
2. A sticky footer that rests below the content and will be pushed down to the bottom
3. Two left justified vertically centered fixed height divs.

Now I have been able to create all of the above mentioned concepts by themselves. But when I try to combine these ideas, things fail miserably.

does anyone know of a site that has these elements together, to which I could take a look at or some good tutorials that have these ideas combined and not separate?

Thanks in advance for any help!

[AshtonSanders]

Oooo. Sounds fun and challenging.

I can’t think of a site like this off the top of my head…

Do you have your combination failure available for looking at? We might be able to fiddle with it and give you some tips.

[soundman414]

OK this is probably the best attempt I have had so far.

http://idisk.mac.com/marc.dostie//Public/try1.html

Although when I put content into this there is a nasty white space that appears at the bottom of the screen if you change the size of the window.

[AshtonSanders]

Well, I’ll do what I can to help.

To start: You have this code for both the img#background and div#wrap

Code:

height:100%;
min-height:800px;

My Screen size is 1440×900, but my browser window is only 740px tall. Since your min height is taller than my screen, My screen can scroll, and the footer is "below the fold." Why do you have a min-height?

Let me know what other problems you’re having. (Let me see this horrible white space when you add content.)

[soundman414]

Sorry for the delay. Here is an updated version I have been working on, If I lower the min-height of the two items that is when the browser produced this white space. In this demo I changed it to min 600 and If your browser is maximized; try to resize it to be smaller. Once the scroll bars appear, a white space at the bottom of the page shows up. I cannot seem to find a way to rid the code of this.

http://idisk.mac.com/marc.dostie//Public/resources/try1.html

[AshtonSanders]

hmmm.

Well, Is there a reason you have min-height set? I dont’ believe you need all those min-heights.

I did some fiddling, and got it to work in my Firefox. Here’s some of the things I changed:

Code:

try1.html (line 15)
img#background {
color:white;
height:100%;
left:0;
min-width:1000px;
position:absolute;
top:0;
width:100%;
z-index:-1;
}

try1.html (line 21)
#main {
}

try1.html (line 71)
#floater {
float:left;
height:50%;
margin-bottom:-300px;
position:relative;
width:1px;
}

try1.html (line 77)
#centered {
clear:left;
margin-bottom:0;
margin-right:0;
margin-top:0;
max-width:1000px;
min-width:1000px;
position:relative;
width:1000px;
}

try1.html (line 89)
#side {
left:0;
margin:10px;
position:absolute;
right:70%;
top:0;
width:300px;
}

To summarize, I deleted all of the forced heights that could be interfering with your 100% heights.

(delete the line numbers…)

Let me know how it goes.

[Author]

Posts