SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    IE relative div bug when maximised (was: Getting a div to fill the available space)

    So I've been trying for a few days to get the layout I designed in to CSS, and finally I'm getting closer - after trying loads of prebuilt layouts, I created my own from snippets of others and stuff I've read, and it is getting there.

    Firstly, below is a screen shot of the layout as it is (for the first time ever it looks the same in IE and Firefox - exciting stuff lol).



    Obviously the colours/whatever aren't what I am gonna use, but that's pretty much how I want the layout to look. Problem is, that layout won't resize properly because the main content pane ("abcd abcd ...") has a fixed height (in terms of a percentage) to it. I can't figure out how to get it to expand to fill the space in between the header and footer (leaving a gap) - my guess is padding and margins come in to play but I don't understand quite enough to figure it out myself.

    If that worked, I'd be pretty happy, even better though would be to get the scroll bar for the content pane to be the main window scroll bar (rather than inside the pane itself) - I've seen a few layouts which do this, again I think it's to do w/ margins and padding but I'm hoping someone can explain better

    Below is the HTML/CSS for this test, later I'll split the CSS off but for now I just want to get the layout correct. Please feel free to critique it as harshly as you can, because I need to learn the best practices!

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>test</title>
    
    <style type="text/css">
    html,body {
    	padding: 0; 
    	margin: 0; 
    	height:100%; 
    	overflow:hidden;
    }
    
    body {
    	text-align: center; /* IE center */
    }
    
    #outer {
    	height:100%;
    	min-height:100%;
    }
    
    #content {
    	width: 760px;
    	margin: 0 auto; /* compliant browser center */
    	text-align: left; /* re align text */
    	background:#faa;
    	height:100%;
    }
    
    div#wrapleft {
    	float: left;
    	width: 50%;
    	margin-left: -300px;
    	height:100%
    }
    
    div#left1 {
    	margin-left: 300px;
    	height:100%;
    	background:#ddd url('left.gif') repeat-y right 
    }
    
    div#content1{
    	float: left;
    	width: 600px;
    	background-color:#fff;
    	height:100%;
    }
    
    div#wrapright{
    	float: right;
    	width: 50%;
    	margin-left: -300px;
    	height:100%;
    }
    
    div#right1{
    	margin-left: 300px;
    	height:100%;
    	background:#ddd url('right.gif') repeat-y left
    }
    
    div#footer1{
    	clear: both;
    	width: 100%
    }
    
    #logoarea {
    	width:600px;
    	height:120px;
    	/*padding-left:25px;
    	padding-right:25px;*/
    	background:#ddd /*url('logo550.png') no-repeat center;*/;
    }
    
    #content2 {
    	position:relative;
    	display:block;
    	top:20px;
    	left:0px;
    	height:66%;
    	bottom:100px;	
    	width:600px;
    	background:#aaa;
    	overflow:auto;
    }
    	
    /*footerStickAlt modified*/
    
    #nonFooter
    {
    position: relative;
    min-height: 100%;
    }
    
    * html #nonFooter
    {
    height: 100%;
    }
    
    #footer
    {
    position: relative;
    bottom:30px;
    height:30px;
    margin-top: -30px;
    background:#a1a;
    margin:0px auto;
    width:600px;
    }
    
    </style>
    
    </head>
    <body>
    
    <div id="outer">
    
    <div id="wrapleft">
    <div id="left1">
    </div>
    </div>
    
    <div id="content1">
    <div id="logoarea"></div>
    <div id="content2">
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    <p>abcd
    </div>
    
    </div>
    
    <div id="wrapright">
    <div id="right1">
    </div>
    </div>
    
    <div id="footer1">
    <div id="footer">
    dfsfds
    </div>
    </div>
    
    </div>
    
    </body>
    </html>
    Any help is greatly appreciated (along with all the help I've already got from lurking and reading tutorials, examples e.g. pmob's etc.)

    Cheers,
    Tom
    Last edited by author123; Jun 23, 2006 at 12:08. Reason: Change of topic

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you set a height then all browsers except ie will adhere to that height so be careful when you specify 100% height otherwise that is all you will get.

    You can't really start an element some way down the page and ask it to almost go to the bottom. You can of course do as you have done and give a specific height with overflow:auto so that a scrollbar appears.

    The only think you can do is to use some padding (or borders) on an absolutely placed footer to give you some space above the footer to create the illusion that then center content stops short.

    Here is one of my examples changed to reflect this.

    http://www.pmob.co.uk/temp/1colcentred3.htm

    The white space is the top border of the footer and the clear footer has been increased in height to hold the text away.

    I'm assuming this is something like you wanted unless of course you did want a scrollbar on the center and then you'd need to use a fixed type layout which ie can't really do unless you force quirks mode.

    e.g.

    http://www.pmob.co.uk/temp/fixed-centred.htm
    http://www.pmob.co.uk/temp/fixedagain.htm

    Of course this sets all other sorts of problems and is best avoided.

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Thanks for the advice, I'd already seen that example of yours and yeah, it's close to what I want.

    What I now have is a version that works pretty much how I want in Firefox, but in IE6 is wildly offset and doesn't scroll. I will keep trying to figure it out, but I'm sure someone with better CSS knowledge and experience will be able to tell me quickly where I am going wrong.

    Here are two examples (in both cases, the stylesheet is in the html):

    http://tommyd.jamroll.net/test_long.html
    http://tommyd.jamroll.net/test_short.html

    In Firefox, the long version is pretty much fine. Ideally the scroll bar would go down the side of the window, not that pane though, I tried having a go at the padding/whitespace on footer thing but my brain is a bit CSS'ed out at the minute. The short version isn't quite right, in that the content bit (lighter gray on the left hand of the main pane) doesn't stretch all the way down. I'm sure that is easy to correct but again, I just can't see it right now!

    In IE, as I say, it's knackered... would there be some IE specific (conditional comment/whatever) hacks I could apply here? I've got such a violent hatred for IE right now that I'd be prepared to just serve IE users an unstyled version but that's probably not the best idea...

    If yourself or anyone else could take a look and give me some advice, that'd be excellent.

    Thanks,
    Tom

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I think you'd need to do something like this to get it working in ie.

    http://www.pmob.co.uk/temp/1colcentred-fixed.htm

    Thats about as close as you can get in standards mode and seems to do what you want.

  5. #5
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First glance, that looks pretty much exactly what I am after! I'll have to try it out in a bit and I'll report back. Thanks so much, great forum here and you've been extremely helpful... to think a few days ago I knew next to nothing about using CSS

    Cheers,
    Tom

  6. #6
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's awesome Paul, thanks. First layout I've seen where changing numbers round doesn't create some mad effect I've broken the footer in IE somehow but f*@! IE for now, I'm sure I can sort it out with some hacks. Really, thanks so much!

  7. #7
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Done quite a lot of customising, and it looks fantastic. Client really likes the design too So can't thank you enough for helping here.

    I seem to have introduced a bug though, in that it looks fine in IE as long as the window is not maximised (thanks to the * html #inner {position:relative;left:9px;} hack) - however, when I maximise the window, the #inner div (i.e. the left and right "frames") is offset to the right too much (by exactly 9px, so removing the hack above or changing it to left:0px; makes it work fine when maximised, but too far left if not).

    Your version doesn't do this, so it must be my fault somewhere. I'll post up my CSS/HTML tomorrow, I'm in a bit of a rush right now, but I was just wondering if anyone had seen this problem before? I've reproduced it on a few machines...

    Cheers,
    Tom

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    yes my example does suffer from it if you remove some content. The problem is the scroll bar appearing and taking up screen space. Therefore we can just add a default scrollbar and things should be ok.

    Code:
    * html #contain-all{
     position:absolute;
     overflow:auto;
     overflow-y:scroll;
     width:100%;
     height:100%;
     z-index:1;
    }
    You'll have to refer to my example to see where it goes etc.

  9. #9
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome. It looks pretty much perfect in both browsers now (and every other except IE5.5 and below, according to browsercams - I'll probably just provide a simplified version for them, with a message telling them to get FF/Opera ). You are a CSS legend !

    Thanks v much
    Tom

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Tom,

    If I had time I could probably fix it for ie5 and 5.5. as my original demos worked in them too but I left out some of the hacks when i re-jigged it for you.

    If its a problem for you then provide a link or post your code and I'll take a look over the weekend sometime

  11. #11
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Might do, but it's not top of my priorities... I'd be happy to serve them a simplified version of the site. Do you have any statistics/whatever on how many people use IE 5/5.5 vs 6+? My hatred for IE has become so passionate this past week, I've ensured everyone I know has switched to Firefox now. Did MS honestly think it was a good idea to f--- with the standards so much? Arggggh... lol

    Cheers
    Tom

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,385
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The main issues with mine in ie5 were simply the margin:auto issue and ie5 and ,.5. neeed text-align:center on a parent in order to center.

    There were quite a few other little tweaks but it now works in ie5 and ie5.5 as well.

    http://www.pmob.co.uk/temp/1colcentred-fixed2.htm

    Browser stats tend to vary quite wildly depending on the type of site etc but trends can be spotted:

    browser stats here:
    http://www.upsdell.com/BrowserNews/stat.htm
    http://www.w3schools.com/browsers/browsers_stats.asp

    http://www.456bereastreet.com/archiv...s_and_choices/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •