Stop the divs from squishing when resizing window

Pardon the title.

I'm trying to prevent my divs from being squished together and totally ruining the layout if the user resizes their window by less than 800 pixels.  For example, if you resize Slashdot.org less than 800 pixels wide, the bottom scrollbar kicks in and the divs no longer move with the window stopping the squishing effect if you will.  I can't seem to figure out how they do it or how I would go about applying it to the code below.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Doh</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* CSS Document */
* {margin:0;padding:0}
 
/* commented backslash hack v2 \*/ 
html, body{height:100%} 
/* end hack */ 
 
body {
	background:#f3f2df url(leftcolbg.jpg) repeat-y left top;
	color: #FFF;
	border-top: medium solid #FFFFFF;
 
}
#outer{
	margin-left:176px;
	margin-right:209px;
	background: #FFF;
	border-left: medium solid #FFFFFF;
	border-right: medium solid #FFFFFF;
	margin-bottom:-23px;
	min-height:100%
}
 
#left {
	position:relative;/*ie needs this to show float */
	width:172px;
	float:left;
	margin-left:-171px;/*must be 1px less than width otherwise won't push footer down */
	z-index:3;
	left:-1px;
	padding-top: 25px;
	color: #000000;
}
#right {
	position:relative;/*ie needs this to show float */
	width:209px;
	float:right;
	margin-right:-208px;/*must be 1px less than width otherwise won't push footer down */
	z-index:100;	
	left: 1px;
	color: #000;
 
}
#footer {
	width:100%;
	clear:both;
	border-top: medium solid #FFFFFF;
	border-bottom: medium solid #FFFFFF;
	text-align:center;
	position:relative;
}
#footer_left {
	position:absolute;
	left:0px;
	width:172px;
	height: 17px;
	z-index:11;
	background-color: #C10202;
	padding: 2px;
}
#footer_right {
	position:absolute;
	z-index:12;
	left: 179px;
	height: 17px;
	background-color: #505050;
	right: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 9px;
	text-align: right;
	vertical-align: middle;
	padding: 2px;
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:52px;}/*needed to make room for footer*/
#centrecontent {
	width:100%;
	float:left;
	position:relative;
	z-index:1;
	margin:0 -1px;/* moz fix*/
	color: #000;
	padding-top: 160px;
}
#centrecontent p { padding: 0 20px; }
h1 {
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-weight: lighter; font-size: 150%; padding: 20px;
}
h1#head{
	background: #C10202;
	border-bottom: medium solid #FFFFFF;
	position:relative;
	margin:0px -212px 10px -179px;
	padding:15px ;
	width:auto;
	height: 71px;
	min-height:0;
}
#head span {
	font-size: small;
	color: #FFF;
}
h3{margin:0 0 1em 0}
h2{margin:1em;text-align:center}
#header_sub1 {	position:absolute;
	left:0px;
	height:25px;
	z-index:6;
	border-top: medium solid #FFFFFF;
	border-bottom: medium solid #FFFFFF;
	border-right: medium solid #FFFFFF;
	background-color: #C10202;
	right: 209px;
	top: 108px;
}
#header_sub2 {
	position:absolute;
	left:179px;
	height:130px;
	background-color: #707992;
	right: 212px;
	top: 139px;
	border-bottom-width: medium;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
	z-index: 1;
}
#menu_bar {
	position:absolute;
	width: 500px;
	margin-left: -250px;
	left: 50%;
	z-index: 1;
}
#menu_bar_container{
	text-align: center;
	position: absolute;
	background-color: #D0D0B8;
	border-top: medium solid #FFFFFF;
	top: 75px;
	left:0px;
	width: 100%;
	padding-top: 5px;
	height: 29px;
	display: block;
	z-index:1;
}
#coltop_left {
	position: absolute;
	left: 0px;
	top: 93px;
	width: 176px;
	height: 13px;
	z-index: 2;
	background:#f3f2df;
	border-top: medium solid #FFFFFF;
	border-right: medium solid #FFFFFF;
	border-bottom: medium solid #000000;
}
#coltop_right {
	position: absolute;
	right: 0px;
	top: 93px;
	width: 209px;
	min-height: 50px;
	z-index: 2;
	background:#f3f2df;
	border-top: medium solid #FFFFFF;
	border-left: medium solid #FFFFFF;
	color: #000000;
}
 
</style>
</head>
<body>
<div id="minHeight"></div>
<div id="outer">
	<h1 id="head">Three Columns in detail - <span> an explanation of the 
	techniques involved in this layout</span></h1>
 
	<div id="left">Left nav going here...</div>
	<div id="right"></div>
	<div id="centrecontent"></div>
	<div id="clearfooter">
	<div id="coltop_left"></div><div id="coltop_right"></div>
	<div id="menu_bar_container"><div id="menu_bar">Menu goes here...</div></div>
	<div id="header_sub1"></div><div id="header_sub2"></div>
	</div>
	<!-- to clear footer -->
</div>
<!-- end outer div -->
<div id="footer"><div id="footer_left"></div><div id="footer_right"></div>
 
</body>
</html>

Open in new window

BendOverIGotYourBackAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Peter HartCommented:
there are
 min-height and min-width   operates you can define in yout styles to stop the divs going slower than the minimum.
i.e.
#centrecontent {
      width:100%;
      min-width:200;
      float:left;
      position:relative;
      z-index:1;
      margin:0 -1px;/* moz fix*/
      color: #000;
      padding-top: 160px;
}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Peter HartCommented:
not slower but smaller !
0
kdtreshCommented:
It looks like slashdot only has one column that isn't fixed. If you make all columns except one fixed, and put something in the variable column that is a fixed width (like a blank spacer image), it should expand as far as it can and contract until it hits the fixed-width item, at which time the horizontal scroll should come up. Just have to figure out the fixed widths that add up to 800 wide.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

BendOverIGotYourBackAuthor Commented:
thanks chilternPC.

i tried setting the min-width to 600px and it does cause the scrollbar to appear after a certain point but the divs still squish together and my center content now appears on top of my right column.  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Doh</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* CSS Document */
* {margin:0;padding:0}
 
/* commented backslash hack v2 \*/ 
html, body{height:100%} 
/* end hack */ 
 
body {
        background:#f3f2df url(leftcolbg.jpg) repeat-y left top;
        color: #FFF;
        border-top: medium solid #FFFFFF;
 
}
#outer{
        margin-left:176px;
        margin-right:209px;
        background: #FFF;
        border-left: medium solid #FFFFFF;
        border-right: medium solid #FFFFFF;
        margin-bottom:-23px;
        min-height:100%
}
 
#left {
        position:relative;/*ie needs this to show float */
        width:172px;
        float:left;
        margin-left:-171px;/*must be 1px less than width otherwise won't push footer down */
        z-index:3;
        left:-1px;
        padding-top: 25px;
        color: #000000;
}
#right {
        position:relative;/*ie needs this to show float */
        width:209px;
        float:right;
        margin-right:-208px;/*must be 1px less than width otherwise won't push footer down */
        z-index:100;    
        left: 1px;
        color: #000;
 
}
#footer {
        width:100%;
        clear:both;
        border-top: medium solid #FFFFFF;
        border-bottom: medium solid #FFFFFF;
        text-align:center;
        position:relative;
}
#footer_left {
        position:absolute;
        left:0px;
        width:172px;
        height: 17px;
        z-index:11;
        background-color: #C10202;
        padding: 2px;
}
#footer_right {
        position:absolute;
        z-index:12;
        left: 179px;
        height: 17px;
        background-color: #505050;
        right: 0px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #FFFFFF;
        font-size: 9px;
        text-align: right;
        vertical-align: middle;
        padding: 2px;
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:52px;}/*needed to make room for footer*/
#centrecontent {
        width:100%;
        min-width:500px;
        float:left;
        position:relative;
        z-index:1;
        margin:0 -1px;/* moz fix*/
        color: #000;
        padding-top: 160px;
}
#centrecontent p { padding: 0 20px; }
h1 {
        font-family: Verdana, Arial, Helvetica, sans-serif; 
        font-weight: lighter; font-size: 150%; padding: 20px;
}
h1#head{
        background: #C10202;
        border-bottom: medium solid #FFFFFF;
        position:relative;
        margin:0px -212px 10px -179px;
        padding:15px ;
        width:auto;
        height: 71px;
        min-height:0;
}
#head span {
        font-size: small;
        color: #FFF;
}
h3{margin:0 0 1em 0}
h2{margin:1em;text-align:center}
#header_sub1 {  position:absolute;
        left:0px;
        height:25px;
        z-index:6;
        border-top: medium solid #FFFFFF;
        border-bottom: medium solid #FFFFFF;
        border-right: medium solid #FFFFFF;
        background-color: #C10202;
        right: 209px;
        top: 108px;
}
#header_sub2 {
        position:absolute;
        left:179px;
        height:130px;
        background-color: #707992;
        right: 212px;
        top: 139px;
        border-bottom-width: medium;
        border-bottom-style: solid;
        border-bottom-color: #FFFFFF;
        z-index: 1;
}
#menu_bar {
        position:absolute;
        width: 500px;
        margin-left: -250px;
        left: 50%;
        z-index: 1;
}
#menu_bar_container{
        text-align: center;
        position: absolute;
        background-color: #D0D0B8;
        border-top: medium solid #FFFFFF;
        top: 75px;
        left:0px;
        width: 100%;
        padding-top: 5px;
        height: 29px;
        display: block;
        z-index:1;
}
#coltop_left {
        position: absolute;
        left: 0px;
        top: 93px;
        width: 176px;
        height: 13px;
        z-index: 2;
        background:#f3f2df;
        border-top: medium solid #FFFFFF;
        border-right: medium solid #FFFFFF;
        border-bottom: medium solid #000000;
}
#coltop_right {
        position: absolute;
        right: 0px;
        top: 93px;
        width: 209px;
        min-height: 50px;
        z-index: 2;
        background:#f3f2df;
        border-top: medium solid #FFFFFF;
        border-left: medium solid #FFFFFF;
        color: #000000;
}
 
</style>
</head>
<body>
<div id="minHeight"></div>
<div id="outer">
        <h1 id="head">Three Columns in detail - <span> an explanation of the 
        techniques involved in this layout</span></h1>
 
        <div id="left">Left nav going here...</div>
        <div id="right"></div>
        <div id="centrecontent">
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br></div>
        <div id="clearfooter">
        <div id="coltop_left"></div><div id="coltop_right"></div>
        <div id="menu_bar_container"><div id="menu_bar">Menu goes here...</div></div>
        <div id="header_sub1"></div><div id="header_sub2"></div>
        </div>
        <!-- to clear footer -->
</div>
<!-- end outer div -->
<div id="footer"><div id="footer_left"></div><div id="footer_right"></div>
 
</body>
</html>

Open in new window

0
BendOverIGotYourBackAuthor Commented:
kdtresh,

I have a left div of 172px and a right div of 209px.  I created a colored spacer 400x10 and placed it in the center content.  Unfortunately, the right div appears to float underneath it.  See attached image.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Doh</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* CSS Document */
* {margin:0;padding:0}
 
/* commented backslash hack v2 \*/ 
html, body{height:100%} 
/* end hack */ 
 
body {
        background:#f3f2df url(leftcolbg.jpg) repeat-y left top;
        color: #FFF;
        border-top: medium solid #FFFFFF;
 
}
#outer{
        margin-left:176px;
        margin-right:209px;
        background: #FFF;
        border-left: medium solid #FFFFFF;
        border-right: medium solid #FFFFFF;
        margin-bottom:-23px;
        min-height:100%
}
 
#left {
        position:relative;/*ie needs this to show float */
        width:172px;
        float:left;
        margin-left:-171px;/*must be 1px less than width otherwise won't push footer down */
        z-index:3;
        left:-1px;
        padding-top: 25px;
        color: #000000;
}
#right {
        position:relative;/*ie needs this to show float */
        width:209px;
        float:right;
        margin-right:-208px;/*must be 1px less than width otherwise won't push footer down */
        z-index:100;    
        left: 1px;
        color: #000;
 
}
#footer {
        width:100%;
        clear:both;
        border-top: medium solid #FFFFFF;
        border-bottom: medium solid #FFFFFF;
        text-align:center;
        position:relative;
}
#footer_left {
        position:absolute;
        left:0px;
        width:172px;
        height: 17px;
        z-index:11;
        background-color: #C10202;
        padding: 2px;
}
#footer_right {
        position:absolute;
        z-index:12;
        left: 179px;
        height: 17px;
        background-color: #505050;
        right: 0px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #FFFFFF;
        font-size: 9px;
        text-align: right;
        vertical-align: middle;
        padding: 2px;
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:52px;}/*needed to make room for footer*/
#centrecontent {
        width:100%;
        float:left;
        position:relative;
        z-index:1;
        margin:0 -1px;/* moz fix*/
        color: #000;
        padding-top: 160px;
}
#centrecontent p { padding: 0 20px; }
h1 {
        font-family: Verdana, Arial, Helvetica, sans-serif; 
        font-weight: lighter; font-size: 150%; padding: 20px;
}
h1#head{
        background: #C10202;
        border-bottom: medium solid #FFFFFF;
        position:relative;
        margin:0px -212px 10px -179px;
        padding:15px ;
        width:auto;
        height: 71px;
        min-height:0;
}
#head span {
        font-size: small;
        color: #FFF;
}
h3{margin:0 0 1em 0}
h2{margin:1em;text-align:center}
#header_sub1 {  position:absolute;
        left:0px;
        height:25px;
        z-index:6;
        border-top: medium solid #FFFFFF;
        border-bottom: medium solid #FFFFFF;
        border-right: medium solid #FFFFFF;
        background-color: #C10202;
        right: 209px;
        top: 108px;
}
#header_sub2 {
        position:absolute;
        left:179px;
        height:130px;
        background-color: #707992;
        right: 212px;
        top: 139px;
        border-bottom-width: medium;
        border-bottom-style: solid;
        border-bottom-color: #FFFFFF;
        z-index: 1;
}
#menu_bar {
        position:absolute;
        width: 500px;
        margin-left: -250px;
        left: 50%;
        z-index: 1;
}
#menu_bar_container{
        text-align: center;
        position: absolute;
        background-color: #D0D0B8;
        border-top: medium solid #FFFFFF;
        top: 75px;
        left:0px;
        width: 100%;
        padding-top: 5px;
        height: 29px;
        display: block;
        z-index:1;
}
#coltop_left {
        position: absolute;
        left: 0px;
        top: 93px;
        width: 176px;
        height: 13px;
        z-index: 2;
        background:#f3f2df;
        border-top: medium solid #FFFFFF;
        border-right: medium solid #FFFFFF;
        border-bottom: medium solid #000000;
}
#coltop_right {
        position: absolute;
        right: 0px;
        top: 93px;
        width: 209px;
        min-height: 50px;
        z-index: 2;
        background:#f3f2df;
        border-top: medium solid #FFFFFF;
        border-left: medium solid #FFFFFF;
        color: #000000;
}
 
</style>
</head>
<body>
<div id="minHeight"></div>
<div id="outer">
        <h1 id="head">Three Columns in detail - <span> an explanation of the 
        techniques involved in this layout</span></h1>
 
        <div id="left">Left nav going here...</div>
        <div id="right"></div>
        <div id="centrecontent"><img border="0" src="width.gif"><br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br></div>
        <div id="clearfooter">
        <div id="coltop_left"></div><div id="coltop_right"></div>
        <div id="menu_bar_container"><div id="menu_bar">Menu goes here...</div></div>
        <div id="header_sub1"></div><div id="header_sub2"></div>
        </div>
        <!-- to clear footer -->
</div>
<!-- end outer div -->
<div id="footer"><div id="footer_left"></div><div id="footer_right"></div>
 
</body>
</html>

Open in new window

Picture1.jpg
0
kdtreshCommented:
It may not be possible in CSS with the floats. May be a time to use a table. You can use <div style="min-width:172px">Left nav goes here...</div> in the first td, the same with 500px in the middle td, and 209px in the right td, and it will not shrink below those widths.
0
Peter HartCommented:
I would put a min-width on the outer div and this should stop the rearranging,
0
BendOverIGotYourBackAuthor Commented:
chilternPC, gave your suggestion a try.   the header, leftcontent, and centercontent remain fixed.  everything else still moves.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Doh</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* CSS Document */
* {margin:0;padding:0}
 
/* commented backslash hack v2 \*/ 
html, body{height:100%} 
/* end hack */ 
 
body {
        background:#f3f2df url(leftcolbg.jpg) repeat-y left top;
        color: #FFF;
        border-top: medium solid #FFFFFF;
 
}
#outer{
        margin-left:176px;
        margin-right:209px;
        background: #FFF;
        border-left: medium solid #FFFFFF;
        border-right: medium solid #FFFFFF;
        margin-bottom:-23px;
        min-height:100%;
		min-width:500px;
 
}
 
#left {
        position:relative;/*ie needs this to show float */
        width:172px;
        float:left;
        margin-left:-171px;/*must be 1px less than width otherwise won't push footer down */
        z-index:3;
        left:-1px;
        padding-top: 25px;
        color: #000000;
}
#right {
        position:relative;/*ie needs this to show float */
        width:209px;
        float:right;
        margin-right:-208px;/*must be 1px less than width otherwise won't push footer down */
        z-index:100;    
        left: 1px;
        color: #000;
 
}
#footer {
        width:100%;
        clear:both;
        border-top: medium solid #FFFFFF;
        border-bottom: medium solid #FFFFFF;
        text-align:center;
        position:relative;
}
#footer_left {
        position:absolute;
        left:0px;
        width:172px;
        height: 17px;
        z-index:11;
        background-color: #C10202;
        padding: 2px;
}
#footer_right {
        position:absolute;
        z-index:12;
        left: 179px;
        height: 17px;
        background-color: #505050;
        right: 0px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        color: #FFFFFF;
        font-size: 9px;
        text-align: right;
        vertical-align: middle;
        padding: 2px;
}
#clearheader{height:72px;}/*needed to make room for header*/
#clearfooter{clear:both;height:52px;}/*needed to make room for footer*/
#centrecontent {
        width:100%;
        float:left;
        position:relative;
        z-index:1;
        margin:0 -1px;/* moz fix*/
        color: #000;
        padding-top: 160px;
}
#centrecontent p { padding: 0 20px; }
h1 {
        font-family: Verdana, Arial, Helvetica, sans-serif; 
        font-weight: lighter; font-size: 150%; padding: 20px;
}
h1#head{
        background: #C10202;
        border-bottom: medium solid #FFFFFF;
        position:relative;
        margin:0px -212px 10px -179px;
        padding:15px ;
        width:auto;
        height: 71px;
        min-height:0;
}
#head span {
        font-size: small;
        color: #FFF;
}
h3{margin:0 0 1em 0}
h2{margin:1em;text-align:center}
#header_sub1 {  position:absolute;
        left:0px;
        height:25px;
        z-index:6;
        border-top: medium solid #FFFFFF;
        border-bottom: medium solid #FFFFFF;
        border-right: medium solid #FFFFFF;
        background-color: #C10202;
        right: 209px;
        top: 108px;
}
#header_sub2 {
        position:absolute;
        left:179px;
        height:130px;
        background-color: #707992;
        right: 212px;
        top: 139px;
        border-bottom-width: medium;
        border-bottom-style: solid;
        border-bottom-color: #FFFFFF;
        z-index: 1;
}
#menu_bar {
        position:absolute;
        width: 500px;
        margin-left: -250px;
        left: 50%;
        z-index: 1;
}
#menu_bar_container{
        text-align: center;
        position: absolute;
        background-color: #D0D0B8;
        border-top: medium solid #FFFFFF;
        top: 75px;
        left:0px;
        width: 100%;
        padding-top: 5px;
        height: 29px;
        display: block;
        z-index:1;
}
#coltop_left {
        position: absolute;
        left: 0px;
        top: 93px;
        width: 176px;
        height: 13px;
        z-index: 2;
        background:#f3f2df;
        border-top: medium solid #FFFFFF;
        border-right: medium solid #FFFFFF;
        border-bottom: medium solid #000000;
}
#coltop_right {
        position: absolute;
        right: 0px;
        top: 93px;
        width: 209px;
        min-height: 50px;
        z-index: 2;
        background:#f3f2df;
        border-top: medium solid #FFFFFF;
        border-left: medium solid #FFFFFF;
        color: #000000;
}
 
</style>
</head>
<body>
<div id="minHeight"></div>
<div id="outer">
        <h1 id="head">Three Columns in detail - <span> an explanation of the 
        techniques involved in this layout</span></h1>
 
        <div id="left">Left nav going here...</div>
        <div id="right"></div>
        <div id="centrecontent"><img border="0" src="width.gif"><br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br>
        This is just some random text here to see how the center div reacts when the browser window is resized.  Hopefully the div to the right will not make it smaller! <br></div>
        <div id="clearfooter">
        <div id="coltop_left"></div><div id="coltop_right"></div>
        <div id="menu_bar_container"><div id="menu_bar">Menu goes here...</div></div>
        <div id="header_sub1"></div><div id="header_sub2"></div>
        </div>
        <!-- to clear footer -->
</div>
<!-- end outer div -->
<div id="footer"><div id="footer_left"></div><div id="footer_right"></div>
 
</body>
</html>

Open in new window

temp.jpg
0
Jason C. LevineNo oneCommented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.