CSS Help

**GreenSkyChris** · 02-22-2011

I know its not really programming per se but thought it was the best place for it on here.

Can anyone help me please, I am a newb to css but can not understand why my divs are not displaying properly.

my html is as follows ;

HTML Code:

<!DOCTYPE
 html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <link rel="stylesheet" type="text/css" href="/styles/style.css" />
      <title><?php echo $title ?></title>   
   </head>
   <body>
   <div id="wrapper">
      <div id="banner">
         <a id="logoa" href="/"><img id="logoimg" src="/images/logo.jpg" width="300" height="139" alt="Company Logo" /></a>
      </div>
	   <div id="leftcol"></div>
	   <div id="maincol">
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
         <h1>alskdfjl;askdfj;lkasdjfl ldfknaslkdfjlasd </h1>
      </div>
      <div id="footer"></div>        
   
   </div>
   </body>
</html>

and my css is as follows;

HTML Code:

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

body 
{
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #CCC;
	background-image: url(../images/bg2.jpg);
	background-repeat: repeat-x;
	font-family: Arial, Helvetica, sans-serif;
}

#logodiv
{
	width: 300px;
	height: 139px;
	float: left;
	margin-left: 40px;
	margin-top: 15px;
}

#logoimg, #logodiv, #logoa
{
	border: none;
}

#wrapper
{
	width: 968px;
	height: 100%;
	background: #FFF;
	margin: 0 auto;
}

#banner
{
	width: 968px;
	height: 165px;
	float: left;
	border-bottom: 4px solid #000;
}

#leftcol
{
	float: left;
	width: 250px;
	min-height: 900px;
	border: 2px dotted #FFFF00;
}

#maincol
{
	float: left;
	width: 710px;
	height: 100%;
	border: 2px dashed #99FF00
}

#footer
{
	float: left;
	width: 960px;
	height: 200px;
	border-top: 2px solid #FFF;
	clear: both;
}

Now the page is displaying as such (screen shot)..

**anotherzeb** · 02-22-2011

I can't see a screenshot - could you post it somewhere like flickr and post the link here?

You've got some php in there - is this an html or a php file?

**GreenSkyChris** · 02-23-2011

Originally Posted by anotherzeb

I can't see a screenshot - could you post it somewhere like flickr and post the link here?

You've got some php in there - is this an html or a php file?

Thanks for taking the time to reply. I have now sorted out the problem so its not an issue now anyway. Thank you though.

Thread Tools

Display

CSS Help

Posting Permissions