Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 791
  • Last Modified:

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

0
BendOverIGotYourBack
Asked:
BendOverIGotYourBack
  • 3
  • 3
  • 2
  • +1
1 Solution
 
chilternPCCommented:
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
 
chilternPCCommented:
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now