2 replies [Last post]
Nealeo
Nealeo's picture
Offline
Regular
Last seen: 13 years 14 weeks ago
Joined: 2007-03-14
Posts: 11
Points: 0

I created a page that has a MAIN div section contained within the WRAPPER, and I use an IE hack to "clear" MAIN so that its background will appear behind the div elements floated within MAIN. The page displays fine until the CONTENT div contained within MAIN div attains a height greater than my IE6 hack (* html #main {height: 420px;}). Then the content flows behind the MAIN and the text is cut off and unreadable (see attached examples). I tried the :after clearfix but it had no effect (it is commented out in the CSS).

Here is the applicable code. The page is at http://mirror.www.umb.edu/spring/level2_04.html. CSS is at it displays aceptably in Win IE7, WinFF, MacFF, and Mac Safari:

#wrapper { text-align: left; width: 750px; margin: 0 auto; min-height: 450px; }

* html #main {
height: 420px;
}

#main {
background-image:url(../images/homebg02.gif);
background-repeat:repeat-y;
border-left:#426eab thin solid;
border-right:#426eab thin solid;
overflow:hidden;
}

#content {
width:450px;
float: left;
margin: 40px 10px 20px 10px;
border-right: #999999 thin dotted;
}

#homenav {
float: right;
margin: 100px 10px 0 0;
width: 220px;

}

This seems like it should have a simple fix, but I just cannot find it. Am I missing something fundamental?

Neal

DanA
DanA's picture
Offline
Elder
Last seen: 10 years 14 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

Use height:1%; instead of

Use height:1%; instead of height: 420px; in * html #main

Nealeo
Nealeo's picture
Offline
Regular
Last seen: 13 years 14 weeks ago
Joined: 2007-03-14
Posts: 11
Points: 0

Forgot to get back to you

This worked. Thanks.

Neal