By DIMSKK on

Hi,

I want to make a 100% height layout using css for my drupal website. I have inserted a new id "Container" after the "body" tags and before "page" id (I am using litejazz theme). I have applied the following css to it

#container {
  min-height: 100%;
  background-color: #FFFFFF;
}

and also

html, body {
height: 100%;
}

My page.tpl.php code is.

</head>
<body<?php print phptemplate_body_class($sidebar_left, $sidebar_right); ?>>
<div id="container">
  <div id="page">

  Other code here. I have inserted the above id="container" by myself.

</div>
</body>
</html>

It worked in Firefox but not in IE7. Can anyone figure it out what is the problem. Any help will be greatly appreciated.

Thanks in advance
DIMSKK

⋅ Categories: Drupal 7.x

Comments

livingegg’s picture

livingegg commented

Is there a reason why you used min-height instead of just height? I think IE has a problem with the min-height and min-width properties and just using height should solve your problem (in theory).

DIMSKK’s picture

DIMSKK commented

I don't know CSS so I am using different tutorials to make things working. I have used the above css properties using the following tutorial

http://www.dave-woods.co.uk/?p=144

Even if I change "min-height" to "height", IE7 is still displaying a large blank area below footer on short pages of my site but there is no problem in Firefox.
I have been working on this for more than 3 days but still there is no success.
Please tell me if there is any solution to this problem..

Thanks
DIMSKK

livingegg’s picture

livingegg commented

I did have to deal with this same problem years ago, and I'm not sure if I ever got it solved going the route you are trying to go. I think I just ended up using an entirely different method to achieve my layout (I assume you're going for a three-column layout or something like that). Making dynamic layouts in my opinion is the greatest challenge to table-less, css based designs - it can be very, VERY difficult to achieve even a simple three-column layout that stretches. For the most part this really has nothing to do with drupal, though, and you might consider implementing a well-tested layout such as the holy grail or faux columns - alistapart has many good articles on css layout.

Don't forget that in the end, when you've knocked your head against the wall for so long and are bleeding from your eyes, you can always fall back on good 'ol tables for your basic structural layout, because they just work. Oh I know, someone may try to crucify you - but at least you can say you really did try going the more noble route first, and at the end of the day, sometimes business is business. Tables are still a valid xhtml (strict and transitional) structure, and so you can still have code that validates 100% using tables. Likewise, while it is sometimes said that using a table for your layout will decrease your google ranking, that is just not true. I set up my own site (tczap.com) using a table for the columns (because I didn't have the next 48 hours to spend doing it in css) and within three days I am showing up #1 on google for the search terms I targetted (try searching for "alexandra david-neel tibet").

Good luck!

timpiche’s picture

timpiche commented

Height can not be expressed as a percentage, it should be defined using px.

MJD’s picture

MJD commented

Think I've come across this myself some time ago, I believe IE treats "height" as the minimum. If my memory serves me correctly you should declare both in #container i.e.

height:100%; // for IE
min-height:100%; // for FF, Opera etc etc

hope I've remembered correctly....