Page 1 of 1

DIV not wrapping

Posted: Tue Jun 22, 2010 7:46 am
by gazzieh
I have solved this so many times and still cannot remember how! :(

I have the following HTML page (actually, it's derived from a PHP page but the output is the important side) and the following CSS document. The problem is that, despite the area_left and area_right being wrapped in div main when I place borders as visible I note that their lengths do not cause the main div to increase in height (it remains a collapsed div). I need main to expand with these since without it expanding (and content_main expanding) the content_bottom does not move in relation and so the page does not grow naturally.

To see what I mean simply extend the content of area_left to see the results.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
    	<link href="rro.css" rel="stylesheet" type="text/css">		<title>Welcome to Revision Rocks Online</title> 
    </head>
    <body>
        <div id="container">
        	<div id="content_top">
        		<div>
        			<font size="2" face="Verdana, Arial, Helvetica, sans-serif">
                    	Welcome,&nbsp;Mr&nbsp;Admin.&nbsp;&nbsp;|&nbsp;
                        <a href="index.php?action=control">Control</a>
                        &nbsp;                   |&nbsp;
                        <a href="./cmsadmin/login.php?action=logout">Logout</a>
        			</font>
        		</div>
        	</div>
        	<div id="content_main">
        		<div id="main">
        			<div id="area_left">duck duck goose goose
                    </div>
        			<div id="area_right">					
        				<div id="MSG" style="left: 620px;">
        					<div id="MSG_Top">
        						Latest Information
        					</div>
        					<div id="MSG_Main">
        						<p><a href="article.php?id=4&act=v">One Flew</a></p>
        						<p><a href="article.php?id=2&act=v">Second World War</a></p>
        						<p><a href="article.php?id=1&act=v">Of Mice and Men</a></p>
        					</div>
        				</div>					
        			</div>
        		</div>
        	</div>
        	<div id="content_bottom">
        		<div style="width: 500px; left: 200px;">
        			<img src="images/valid-html401.png" alt="Valid HTML 4.0" style="float: left; left: 35px;" />
        			Copyright Revision Rocks Online &copy;2010&nbsp;&nbsp;&brvbar;&nbsp;&nbsp;Contact Us&nbsp;&nbsp;&brvbar;&nbsp;&nbsp;About Us
        			<img src="images/vcss.gif" alt="Valid CSS 2.1" style="float: right" />
        		</div>
        	</div>
        </div>
    </body>
</html>

Code: Select all

@charset "utf-8";
/* CSS Document */


/* MAIN DOCUMENT INFORMATION */

body
	{
	background-color: #eee;
	font-family: Arial, Helvetica, sans-serif;
	}
	
img
	{
	border-style: none;
	}
	
#container
	{
	margin: auto;
	padding: 0;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	width: 900px;
	border: 1px solid #000;
	}
	
#content_top
	{
	height: 145px;
	width: 900px;
	background: #eee url(images/bcktop.png) center top no-repeat;
	text-align: right;
	/* border: 1px solid #0f0; */
	}
	
#content_top div
	{
	position: relative;
	top: 110px;
	text-align: right;
	padding-right: 85px;
	}
	
#content_top a
	{
	color: #000;
	text-decoration: none;
	}
	
#content_top a:hover
	{
	color: #00f;
	text-decoration: underline;
	}
	
#content_main
	{
	width: 900px;
	min-height: 200px;
	background: #eee url(images/bckmid.png) center top repeat-y;
	border: 1px solid #f00;
	}
	
#content_bottom
	{
	height: 128px;
	width: 900px;
	background: #eee url(images/bckbot.png) center bottom no-repeat;
	}
	
#content_bottom div
	{
	position: relative;
	top: 40px;
	text-align: center;
	font-size: 9px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	
#main
	{
	position: relative;
	width: 830px;
	left: 35px;
	border: 1px solid #0f0;
	}
	
#anchor1
	{
	height: 140px;
	width: 100px;
	margin-left: 100px;
	background: url(images/button.png) center center no-repeat;
	}
	
#anchor1:hover
	{
	height: 140px;
	width: 100px;
	margin-left: 100px;
	background: url(images/button_dn.png) center center no-repeat;
	}

/* MESSAGE BOX PARAMETERS */

#MSG
	{
	border: #7E58AC 1px solid;
	width: 200px;
	min-height: 20px;
	background-color: #FFFFFF;
	}
	
#MSG_Top
	{
	width: 100%;
	height: 12px;
	background-color: #7E58AC;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 10px;
	text-align: center;
	font-weight: bold;
	}
	
#MSG_Main
	{
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	}
	
#MSG_Main p, #MSG_Main a
	{
	font-size: 10px;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	text-decoration: none;
	}
	
#MSG_Main a:hover
	{
	color: #00f;
	text-decoration: underline;
	}
	
/* Posting Space */

#area_left
	{
	float: left;
	min-width: 200px;
	border: 1px solid #00f;
	}

#area_right
	{
	float: right;
	border: 1px solid #0ff;
	}
	
/* Article Space */

#article
	{
	width: 600px;
	border: 1px solid #ff0;
	}

Re: DIV not wrapping

Posted: Tue Jun 22, 2010 12:21 pm
by Jade
This isn't really a PHP problem... more of a HTML/CSS problem. I don't exactly remember what I did to fix it but I've got the same setup on this website here: http://174.132.133.82/ you can view the stylesheet to see how I got it working.

Re: DIV not wrapping

Posted: Tue Jun 22, 2010 12:50 pm
by gazzieh
Sorry if I implied it is a PHP problem, I never thought it was. I know it lays in the CSS/HTML and I am assuming it is CSS.

The error is something related to compliance since it actually works fine in IE but not in FF.

Re: DIV not wrapping

Posted: Tue Jun 22, 2010 12:59 pm
by gazzieh
Okay, found a solution and it's a weird one!

Basically I have to create an empty DIV with the style="clear:both;" just before my parent DIV ends. This forces the system to comply as required. I can only assume that previously I have used another DIV as content and by default this would have been clear:both set - curing a problem I did not even know I had.

Cured! :mrgreen: