Log in

View Full Version : Display 2 DIV's side by side in IE8/9


polenz
06-28-2012, 08:31 PM
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



<!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>




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:
4509

This is how it currently looks:
4510

Thanks
jscheuer1
06-29-2012, 02:14 AM
A good start would be floating them both left:


#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?
bernie1227
06-29-2012, 04:25 AM
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
jscheuer1
06-29-2012, 03:12 PM
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:


<!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>
polenz
07-12-2012, 06:28 PM
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
walshmagger
11-03-2014, 06:30 AM
Div side by side..


<div style="width:100%">
<div style="float:left;background:red;">
First Div
</div>
<div style="float:left;background:blue;">
Second Div
</div>
</div>