Moose56 blog » IE

Full height CSS layout

moose56 — Sat, 24 Oct 2009 10:47:04 +0000

The other day I needed to produce a web page which had a full height and width layout. It also needed header, left hand navigation and main content areas.

There would be no guarantee that the navigation or the main content would be taller than the screen so I needed to fix the layout to the height of the browser. I also wanted it to be cross browser compatible and sizeable by the user if it was used as a popup.

Lots of Google searches uncovered various different ways of getting a similar result to what I wanted, but most made use of the %100 heigh method. As I needed it to work in IE6/7/8 none of these solutions seemed to work.

Anyway, a lot of playing and a complete re-write later I think I have a pretty good solution that works in:

IE
Safari
FireFox

Take a look at an example here.

This should give you the idea of what I was after. So because I could not find what I needed here is a template for anyone else who needs something like it.

This is very depressing!

moose56 — Tue, 15 Apr 2008 15:19:59 +0000

Who will rid me of this turbulent browser?

When will IE6 die a death? I know there are a few people out there who say quit complaining and live with it, but I really am fed up with having to accommodate it.

End of rant.

Double Margin Bug

moose56 — Tue, 21 Aug 2007 17:32:00 +0000

Don’t you just hate it when you spend hours lovingly crafting a layout in CSSedit/Safari/FireFox to the point of beautiful elegance only to discover that IE turns it into a pile of merde? This happened to me just the other day and even though it was down to a tiny, well known bug it still caused me a little grief. Because of this here is yet another blog post about fixing the double margin bug so others may fix it quicker than I did.

So first up, here is what I was after; a 640px wide wrap div centered on the page with a content div centered inside it. The wrap div has a vertically tiled background image that adds a left and right drop shadow border. The width of the border on each side is 5px. I also wanted a margin between the content div and the wrap border. Because of this I made the content div 600px wide giving 20px on each side for a margin. Giving the content div a left margin of 20px centers it nicely inside the wrap div.


#wrap {
    width: 640px;
}


#content {
    width: 600px;
    margin-left: 20px;
}

So I though I was finished, Safari/FireFox/Opera all playing nicely and so was IE7. Then a quick check in IE6 and IE5 (I am a charitable sole) and doh it’s all on the right side.

The science bit (concentrate…)

A lot of tweaking later trying different margin and padding settings and I was getting frustrated. Such a little problem causing me a lot of anguish. Anyway a quick Google on “IE margin problem” and “IE messing up margin” turned up this forum thread (thanks suzyUK).

So according to that all I need to do is add display: inline; to the content div.


#content {
    width: 600px;
    margin-left: 20px;
    display: inline;
}

Magic, IE5/6 working like a charm and all the others are unchanged. Sorted!