height:100% doesn’t work?

[threedash]

Hi there,

I am trying to figure out why the bottom of my site doesn’t wrap around the bottom page.

threedash.com/THREEDASH

(if you look at the index page and aboutme page, the bottom spacing isn’t even. It’s currently set at 1000px, but i don’t want to act this way. )

[doobie]

I wish I could figure out what you were talking about. Could you show some code to explain what you’re seeing/not seeing?

Do you want the footer background to span across the entire width of the page?

-J

[threedash]

do you notice the empty space at the bottom near the footer on the
"about me" page and the "index" page?

I want it to wrap around the content. I don’t want the set

#midContent {
width:1000px;
height:1000px; <

---

(i don’t want to use this…)
background:url(IMG/mid_bg.png) repeat-y;
margin: 0;
padding: 30px 0 0 0; }

I was thinking of changing it to

#midContent {
width:1000px;
overflow: hidden; <

---

background:url(IMG/mid_bg.png) repeat-y;
margin: 0;
padding: 30px 0 0 0; }

im also using,

#me {
margin: -65px 0 0 100px;
float: left;
width: 330;
z-index:1;
}

negative margins to move the picture of myself into frame so this is effecting the "overflow:hidden" because it cuts off the picture.

[maik_b]

Hi, i had the same proplem some months ago.
I remember something like this:

html, body {
height: 100%; /* necessary */
}

#box {
min-height: 100%;
height:auto !important; /* modern Browser */
height:100%; /* IE */
}

http://www.maik-borchert.de

[doobie]

gotcha. Sorry I missed that.

You’ll need to clear the float for the containing div. Many ways to do it. One way would be to set

Code:

overflow: hidden;

on the #midContent div.

Or, you could try this: http://css-tricks.com/snippets/css/clear-fix/

and a good reference: http://css-tricks.com/all-about-floats/

Hope this helps.

-Jacob

[doobie]

"threedash" wrote:

negative margins to move the picture of myself into frame so this is effecting the "overflow:hidden" because it cuts off the picture.

Right, sorry about the last post. the clearfix method should still work, though.

[threedash]

hey malik,

can you explain to me how i should implement your hack?

#box {
min-height: 100%;
height:auto !important; /* modern Browser */
height:100%; /* IE */
}

does #box = midContent

is that what i should change ? or add?

[threedash]

doobie, your method does work, but it shows up very weird on my dreamweaver design mode.

[doobie]

"threedash" wrote:

doobie, your method does work, but it shows up very weird on my dreamweaver design mode.

I’m not surprised. Dreamweaver is notorious for botching pretty much everything I do… Just remember, it’s not a browser. It’s a design tool. And I think that’s why they call it the "clearfix hack"…

Glad it worked, though.

-Jacob

[david263]

Setting a ‘body’ to height: 100% sometimes works, sometimes doesn’t. I think the reason is that its parent, HTML, has zero height. So 100% of zero is zero. The solution:

html, body {height: 100%}

CSS has many unexpected characteristics. Poor design, I think.

[Author]

Posts