Results 1 to 5 of 5

Thread: Display 2 DIV's side by side in IE8/9

  1. #1
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Display 2 DIV's side by side in IE8/9

    Hello, I have a page that is not the way I expect it to in IE8.

    I have 2 DIVs that I want to display side by side. The one on the left will contain a navigation tree and will expand or contract depending on the text size of the link.
    The DIV on the right contains an iFrame. I want the iFrame to fill the entire remaining screen imediately to the right of the nav tree. If the browser window is too small then there should be scrollbars.

    Currently the DIV on the right doesn't fill the remaining space (its only maybe 200px wide) and will wrap underneath the left DIV if I make the browser window smaller. It also lines up to the right-most edge of the browser screen. It should be up against the right edge of the navigation DIV.

    Please advise..

    Thanks

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <HTML xmlns="http://www.w3.org/1999/xhtml">
    <HEAD id=ctl00_Head1>
    <META content="text/html; charset=utf-8" http-equiv=Content-Type>
    <LINK 
    rel=stylesheet type=text/css href="Help/StyleSheet.css" media=screen>
    
    <META name=GENERATOR content="MSHTML 8.00.7601.17824"></HEAD>
    <BODY>
    <FORM>
    
    <DIV id=divnavColumn class=navColumn>
    	Row 1<BR>
    	Row 2<BR>
    </DIV>
    
    <DIV id=contentColumn>
    	<IFRAME id=ContentIFrame height="100%" src="Help/test.htm" frameBorder=0 width="100%"></IFRAME>
    </DIV>
    
    </FORM>
    </BODY>
    </HTML>
    Code:
    html
    {
    	height:100%; 
    }
    
    body 
    { 
    	margin:0; 
    	padding:0; 
    	height:100%; 
    } 
    
    #divnavColumn 
    {
    	height: 100%; 
    	margin: 0 px;
    }
    
    .navColumn 
    {
    	BACKGROUND-COLOR: #27A8EA; 
    	PADDING-RIGHT: 8px; 
    	FLOAT: left; 
    	height: 100%; 
    	margin: 0 px;
    }
    
    #contentColumn 
    {
    	WIDTH: auto; 
    	FLOAT: right; 
    	height: 100%; 
    	margin: 0 px;
    }
    This is how I need it to look:
    Attachment 4509

    This is how it currently looks:
    Attachment 4510

    Thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    A good start would be floating them both left:

    Code:
    #contentColumn 
    {
    	WIDTH: auto; 
    	FLOAT: left; 
    	height: 100%; 
    	margin: 0 px;
    }
    You might need to set a width on the navColumn and/or drop the width: auto from the contentColumn.

    Where are the green and blue backgrounds coming from? Or are they just for illustrative purposes?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    The first thing I did, was to actually set widths for the two divs as well as taking out the padding-right on the navcolumn, so that would also be a good start.
    Bernie
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,935
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Good ideas bernie1227. That padding was a real killer in what I eventually worked out, I had missed it for some reason. I added some more stuff to get it fairly well worked out for IE and others. I used percent widths for the columns. That works out well in this abstract exercise but might not be suitable for a real site. I think javascript might be required if - say you wanted to set the nav to a fixed pixel width and have the content take up the rest. An alternative to that would be to have the body background match the content background and set a width for the content as well. That still has some problems - say if the screen is too narrow, but as long as the content width and combined widths were not too great, it could work out well.

    For ease in working with it, I put the styles on the page. They of course can and probably should be made external again.

    Demo:

    http://home.comcast.net/~jscheuer1/side/2column_h.htm

    Code:

    Code:
    <!DOCTYPE html>
    <html>
    <head id=ctl00_Head1>
    <meta content="text/html; charset=utf-8" http-equiv=Content-Type>
    <title></title>
    <style type="text/css">
    html
    {
    	height:100%; 
    }
    
    body, form 
    { 
    	margin: 0; 
    	padding: 0; 
    	height: 100%; 
    } 
    
    #divnavColumn 
    {
    	height: 100%; 
    	margin: 0px;
    }
    
    .navColumn 
    {
    	background-color: #27a8ea; 
    	float: left; 
    	height: 100%;
    	width: 25%;
    	margin: 0px;
    }
    
    #contentColumn 
    {
    	width:75%; 
    	float: left; 
    	height: 100%; 
    	margin: 0px;
    	background-color: green;
    }
    #ContentIFrame
    {
    	display: block;
    	width: 100%;
    	height: 100%;
    	border-width: 0;
    }
    </style>
    
    </head>
    <body>
    <form>
    
    <div id=divnavColumn class=navColumn>
    	Row 1<br>
    	Row 2<br>
    </div>
    
    <div id=contentColumn>
    	<iframe allowtransparency="true" id=ContentIFrame src="about:blank" frameBorder=0 ></iframe>
    </div>
    
    </form>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    This is how it works in IE8 and 9. I've written this application in ASP.NET:
    http://www.mybirthcare.com/test.html

    Open the links on the left (Regulatory Compliance) and see how the navigation grows and shrinks with the text. You can also collapse the navigation by clicking the icon on the top left

    In order to get this to work in IE I had to add:
    <META content=IE=EmulateIE7 http-equiv=X-UA-Compatible>

    How would I get this to work in Chrome now? It doesn't look right at all.

    Thanks

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
  •