Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Left and Right positioning of divs in IE

    I've got a fair amount of CSS experience but for the most part it is emulating Flash-style pages in CSS/HTML, as much of my work lately has involved helping clients who got fooled into getting a Flash website built where it wasn't appropiate reimplemented in HTML (my most recent effort is at http://www.ultimatehome.co.uk/ ). Generally, this type of work requires only a fixed width for the content as people tend to resist pages that adapt to the window's width for some reason.

    Anyway, I have been pondering redesigning my home page, and wanted to do it in a 100% CSS friendly manner. the layout I want is fairly simple, just a smaller sidebar down the left with links to the various sections of the site, and a larger pane to the right holding the content of the current page.

    Here's the code I've tried so far (ignore the colours, at the moment they're just so I can tell which element is which).

    HTML:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>// This Can't Happen</title>
    <link href="styles/default.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="content">Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content </div>
    <div id="sidebar">
      <h2>Section Title 1</h2>
      <ul>
        <li>Section Link 1</li>
        <li>Section Link 2</li>
        <li>Section Link 3</li>
      </ul>
      <h2>Section Title 2</h2>
      <ul>
        <li>Section Link 1</li>
        <li>Section Link 2</li>
        <li>Section Link 3</li>
      </ul>
    </div>
    </body>
    </html>
    CSS:

    Code:
    body {
    	margin: 0px;
    	padding: 0px;
    }
    div {
    	display: block;
    	position: absolute;
    }
    
    /* The navigation sidebar */
    div#sidebar {
    	width: 250px;
    	top: 5px;
    	left: 5px;
    }
    div#sidebar h2 {
    	margin: 0px;
    	padding: 0px;
    	background: #00CCFF;
    }
    div#sidebar ul {
    	margin: 0px 0px 5px;
    	padding: 0px;
    	list-style: none;
    	background: #00FFCC;
    }
    
    /* Content div */
    div#content {
    	background:#00CCCC;
    	top: 5px;
    	right: 5px;
    	left: 260px;
    }
    This works fine in FireFox, but as ever, Internet Exploder makes a pig's ear of it. The top right hand corner of the content pane ends up 5 pixels from the top and 5 pixels from the right hand side of the window as I want in FF, but the whitespace collapses in IE resulting in a much bigger margin down the right hand side than I wanted.

    Someone suggested I use margins to get the effect I want, so I tried rewriting the CSS thus:

    Code:
    div#content {
    	background:#00CCCC;
    	margin: 5px 5px 5px 260px;
    }
    This didn't work either, now FireFox behaves as IE did with the original CSS, and IE completely cocks it up.

    I've tried googling around for a solution to this, because I surely cannot be the only person who has run into this problem before, but while Google throws up lots of results for CSS bugs in IE regarding the use of CSS positioning, nothing I've found so far has an example like mine. At this point I'm considering just forgetting it and doing it the old-fashioned way with a 2 column table. At least I know that approach will work.

    If anyone can figure out how to work around the apparent IE CSS bug I'm running up against I'd certainly appreciate any advice you can offer.

  • #2
    New Coder
    Join Date
    Sep 2006
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Anyone?

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry for the bump, but surely I'm not the only person to have hit this snag!


  •  

    Posting Permissions

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