Force DIVs to Maintain Position When Browser Resized

[dch3]

I have two DIV's to the right of another (_Sample1.jpg). When the browser is resized, the DIV's are dropped down below the other (_Sampe2).jpg. All three have explicit heights and widths.

How would I make it so that the DIV's remain in their position when the browser is resized giving the user the horizontal scroll bar to see the off screen content?

http://s285.photobucket.com/albums/ll48/chyron7/Miscellaneous/?action=view&current=MyOutlookToday_Sample1.jpg

http://s285.photobucket.com/albums/ll48/chyron7/Miscellaneous/?action=view&current=MyOutlookToday_Sample2.jpg

[thraddash]

Why not add a wrapper <div> around your content to maintain their positions:

Eg:

<div style="width: 1200px;">
<div style="width: 600px; height: 300px; float: left; background-color: red;">CALENDAR</div>
<div style="width: 600px; height: 150px; float: left; background-color: green;">TOP PANEL</div>
<div style="width: 600px; height: 150px; float: left; background-color: blue;">BOTTOM PANEL</div>
</div>

[dch3]

That's already there here's the HTML



<div>
<div style="float:left">
<div style="font-weight:bold;background-color:#C0C0C0;padding:3px;border:solid 1px #000000;margin:0px 0px 3px 0px;width:689px">
<div id="DivLeftHeaderText" style="width:610px;float:left">
</div>
<div style="width:75px;text-align:right">
<span style="font-weight:normal;text-decoration:underline;font-size:8pt" onclick="selectFolder 'ObjectLeftOutlookViewControl','DivLeftHeaderText'">Select Folder</span>
</div>
</div>
<div>
<object classid="CLSID:0006F063-0000-0000-C000-000000000046" id="ObjectLeftOutlookViewControl" style="height:750px;width:695px;border:solid 1px #000000">
<param name="Namespace" value="MAPI" />
<param name="Folder" value="" />
<param name="Restriction" value="" />
<param name="DeferUpdate" value="0" />
</object>
</div>
</div>
<div>
<div style="font-weight:bold;background-color:#C0C0C0;padding:3px;border:solid 1px #000000;margin:0px 0px 3px 0px;width:950px">
<div id="DivCenterTopHeaderText" style="width:872px;float:left">
</div>
<div style="width:75px;text-align:right">
<span style="font-weight:normal;text-decoration:underline;font-size:8pt" onclick="selectFolder 'ObjectCenterTopOutlookViewControl','DivCenterTopHeaderText'">Select Folder</span>
</div>
</div>
<object classid="CLSID:0006F063-0000-0000-C000-000000000046" id="ObjectCenterTopOutlookViewControl" style="height:375px;width:956px;border:solid 1px #000000">
<param name="Namespace" value="MAPI" />
<param name="Folder" value="" />
<param name="Restriction" value="" />
<param name="DeferUpdate" value="0" />
</object>
</div>
<div>
<div style="font-weight:bold;background-color:#C0C0C0;padding:3px;border:solid 1px #000000;margin:3px 0px 3px 0px;width:950px">
<div id="DivCenterBottomHeaderText" style="width:872px;float:left">
</div>
<div style="width:75px;text-align:right">
<span style="font-weight:normal;text-decoration:underline;font-size:8pt" onclick="selectFolder 'ObjectCenterBottomOutlookViewControl','DivCenterBottomHeaderText'">Select Folder</span>
</div>
</div>
<object classid="CLSID:0006F063-0000-0000-C000-000000000046" id="ObjectCenterBottomOutlookViewControl" style="height:343px;width:956px;border:solid 1px #000000">
<param name="Namespace" value="MAPI" />
<param name="Folder" value="" />
<param name="Restriction" value="" />
<param name="DeferUpdate" value="0" />
</object>
</div>
</div>

[thraddash]

Your wrapper <div> does not have a fixed width:
I added the text in bold and it seemed to work:

<div style="width:1660px;">
<div style="float:left;">
<div style="font-weight:bold;background-color:#C0C0C0;padding:3px;border:solid 1px #000000;margin:0px 0px 3px 0px;width:689px">
<div id="DivLeftHeaderText" style="width:610px;float:left">
</div>
<div style="width:75px;text-align:right">
<span style="font-weight:normal;text-decoration:underline;font-size:8pt" onclick="selectFolder 'ObjectLeftOutlookViewControl','DivLeftHeaderText'">Select Folder</span>
</div>
</div>
<div>
<object classid="CLSID:0006F063-0000-0000-C000-000000000046" id="ObjectLeftOutlookViewControl" style="height:750px;width:695px;border:solid 1px #000000">
<param name="Namespace" value="MAPI" />
<param name="Folder" value="" />
<param name="Restriction" value="" />
<param name="DeferUpdate" value="0" />
</object>
</div>
</div>
<div style="float: left;">
<div style="font-weight:bold;background-color:#C0C0C0;padding:3px;border:solid 1px #000000;margin:0px 0px 3px 0px;width:950px">
<div id="DivCenterTopHeaderText" style="width:872px;float:left">
</div>
<div style="width:75px;text-align:right">
<span style="font-weight:normal;text-decoration:underline;font-size:8pt" onclick="selectFolder 'ObjectCenterTopOutlookViewControl','DivCenterTopHeaderText'">Select Folder</span>
</div>
</div>
<object classid="CLSID:0006F063-0000-0000-C000-000000000046" id="ObjectCenterTopOutlookViewControl" style="height:375px;width:956px;border:solid 1px #000000">
<param name="Namespace" value="MAPI" />
<param name="Folder" value="" />
<param name="Restriction" value="" />
<param name="DeferUpdate" value="0" />
</object>
</div>
<div style="float: left;">
<div style="font-weight:bold;background-color:#C0C0C0;padding:3px;border:solid 1px #000000;margin:3px 0px 3px 0px;width:950px">
<div id="DivCenterBottomHeaderText" style="width:872px;float:left">
</div>
<div style="width:75px;text-align:right">
<span style="font-weight:normal;text-decoration:underline;font-size:8pt" onclick="selectFolder 'ObjectCenterBottomOutlookViewControl','DivCenterBottomHeaderText'">Select Folder</span>
</div>
</div>
<object classid="CLSID:0006F063-0000-0000-C000-000000000046" id="ObjectCenterBottomOutlookViewControl" style="height:343px;width:956px;border:solid 1px #000000">
<param name="Namespace" value="MAPI" />
<param name="Folder" value="" />
<param name="Restriction" value="" />
<param name="DeferUpdate" value="0" />
</object>
</div>
</div>

[dch3]

Thanks that did it.