11 replies [Last post]
tebk77
Offline
Regular
Last seen: 8 years 9 weeks ago
Timezone: GMT-4
Joined: 2009-05-16
Posts: 42
Points: 49

Please help! I can't get my divs placed correctly.

I created a container div to contain the leftcolumn, content, & rightcolumn divs. Is that okay? The entire container is s'posed to be centered and it's not. Everything is flush left. Also I wanted a 20px margin above and below the container div. Doesn't happen.

The rightcolumn div should line up with the content div. Instead it drops below. I put a margin-top:0 but it still drops.

An ASIDE comment: when I did a preview of this coding section I noticed at the bottom there is script type = text/javascript coding added (Just before the ending div tag for the footer)!!! Why is that?!

Here's the url:

Here is the coding (CSS is included in the XHTML file):

<!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="application/xhtml+xml; charset=utf-8" />
<meta name="keywords" content="Frankford Friends School, Quaker school for grades K to 8, Frankford Friends, Quaker school, Quaker education, education, Philadelphia, Frankford neighborhood, Frankford Quaker school" />
  <title>FFS TEST new home page</title>
 
<style type="text/css">
/* These styles would normally go in an external style sheet */
 
/* Universal style rule */
*{
  /* Block all browser default margins and padding */
  margin:0;
  padding:0;
  /* Temporary borders */
  border:dashed 1px #000;
}
 
body { /* later change background color to #e9e9e9 */
	text-align: center;
	background-color: #e0ffff;
}
 
#wrapper {
	width:740px;
	margin:0 auto; /* horiz. centers the wrapper */
	margin-top:20px;
	background-color:#FF9900; /* orange */
	text-align:left;
}
 
#header { /* from S4S style.css */
	margin:0;
	background-color:#CCFF00;
	font-family: Verdana, Geneva, Sans-Serif;
	height:90px;
}
 
#navbar {
	background-color:#339933;
	height:21px; /* total height is 28px */
	padding: 7px 7px 0 7px;
	text-align:center;
}
 
#photos {
	background-color:#cc6600;
	width:700px;  /* height:162px; */
	float:center;
	margin:0 auto;
}
 
#container { /* contains left, content, right columns */
	background-color:#660099;
	width:700px;
	float:center;
	margin:20 auto;
}
 
#leftcolumn{ /* Remember, content left margin must match this width */ 
	clear:both;
	float:left;
	width:155px; 
	background-color:#ffffff;
	color:#0033cc; 
} 
 
#content{ /* Left margin must match leftcolumn width */ 
	margin-left:155px;
	margin-top:0;
	float:left;
	width:350px; /*total width is 390px -350 plus 20px padding on each side */
	padding:0 20px; 
	background-color:#0066ff; 
	color:#000; 
} 
 
#rightcolumn{ 
	margin-left:545px;
	margin-top:0;
	float:right;
	width:150px;
	background-color:#ff6699;
} 
 
#footer{
	clear:both;
	background-color:#ffcc66; /* yellowish orange */
	width:95%;
	margin:20px auto;
	border-top:solid thin #000;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, Sans-Serif;
	color:#000;
	text-align:center;
}
 
</style>
 
 
</head>
 
<body>
 
<div id="wrapper">
 
	<div id="header">
    <!-- <a href="index.html"><img src="images/FFSheader??.gif" alt="Frankford Friends School" /></a> -->
    </div>
 
		<div id="navbar"> HOME &nbsp;|&nbsp; ABOUT FFS &nbsp;|&nbsp; ACADEMICS &nbsp;|&nbsp; ADMISSIONS &nbsp;|&nbsp; PARENTS &nbsp;|&nbsp; ALUMNI &nbsp;|&nbsp; GIVING</div>
 
    			<div id="photos">This is where the 3 photos will be. I will save them as a single gif? with 3 across as a single unit?</div>
 
 
                <div id="container">
 
                	<div id="leftcolumn">This is the LEFT COLUMN. INSERT photo of new building.<br /><br /></div>
 
                		<div id="content">This is the CONTENT div ---where UPCOMING EVENTS are listed.<br /><br /><br /></div>
 
                	<div id="rightcolumn">This is the RIGHT COLUMN. INSERT photo of RED building.<br /><br /></div>
 
                </div><!-- end container -->
 
 
                	<div id="footer">
                    	&nbsp;FRANKFORD FRIENDS SCHOOL &nbsp;|&nbsp; 1500 ORTHODOX ST. &nbsp;|&nbsp; PHILADELPHIA, PA 19124 &nbsp;|&nbsp; 215.533.5368 &nbsp;|&nbsp; </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%46%72%61%6e%6b%66%6f%72%64%46%72%69%65%6e%64%73%40%76%65%72%69%7a%6f%6e%2e%6e%65%74%22%3e%46%72%61%6e%6b%66%6f%72%64%46%72%69%65%6e%64%73%40%76%65%72%69%7a%6f%6e%2e%6e%65%74%3c%2f%61%3e%27%29%3b'))</script><p>&nbsp;
                    </div>
 
 
 
</div><!-- end wrapper -->
 
 
</body>
</html>

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 12 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Not exactly sure of the

Not exactly sure of the issue, as it's late, but try changing from XHTML 1.1 to 1.0
1.1 is if you are serving XML.

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 10 years 48 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

Instead of body text align:

Instead of body text align: center; use margin-left:auto; and margin-right: auto;

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 10 years 48 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

Instead of text align:

Instead of text align: center; use margin-left:auto; and margin-right: auto;

djsounds02
djsounds02's picture
Offline
Enthusiast
Burnley, UK
Last seen: 10 years 48 weeks ago
Burnley, UK
Joined: 2010-06-17
Posts: 110
Points: 134

also.. float: center; isnt

also.. float: center; isnt valid.

tebk77
Offline
Regular
Last seen: 8 years 9 weeks ago
Timezone: GMT-4
Joined: 2009-05-16
Posts: 42
Points: 49

thanks plus validator and meta tags questions

I'll try the suggestions! Smile

I wasn't sure about "float:center"!!! Didn't sound quite right! BTW, why would
http://validator.w3.org/ validate this file then?! Isn't that strange.

Earlier I did have a problem getting my file validated by w3 but it was because of my meta tags. It wasn't happy with my meta tags. That was strange because I always copy the basic meta tags and doc type from other files that were validated in past. I searched and searched last night about the issue between utf-8 and charset=ISO-8859-1. Validator was giving me hard time about that!
Any comments?

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 3 weeks 4 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2053
Points: 2285

tebk77 wrote:... I wasn't

tebk77 wrote:

... I wasn't sure about "float:center"!!! Didn't sound quite right! BTW, why would
http://validator.w3.org/ validate this file then?! Isn't that strange.

validator.w3.org wrote:

Markup Validation Service
Check the markup (HTML, XHTML, …) of Web documents

Run it through jigsaw.w3.org to validate the CSS.

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 12 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

Or try out

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

tebk77
Offline
Regular
Last seen: 8 years 9 weeks ago
Timezone: GMT-4
Joined: 2009-05-16
Posts: 42
Points: 49

my layout still doesn't work

Hi,
I deleted "text-align" where it shouldn't have been. Changed margin-left:0 and margin-right:0, etc. to center correctly.
I also re-arranged the width, bkgrd color, etc. @ the top and put float:left, etc. @ the bottom of the styles. Does it matter what order these are?

But my layout still doesn't work.
here is the url:
http://www.frankfordfriendsschool.org/_TEST1.html

here is the coding:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//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="application/xhtml+xml; charset=utf-8" />
<meta name="keywords" content="Frankford Friends School, Quaker school for grades K to 8, Frankford Friends, Quaker school, Quaker education, education, Philadelphia, Frankford neighborhood, Frankford Quaker school" />
  <title>FFS TEST new home page</title>
 
<style type="text/css">
/* These styles would normally go in an external style sheet */
 
/* Universal style rule */
*{
  /* Block all browser default margins and padding */
  margin:0;
  padding:0;
  /* Temporary borders */
  border:dashed 1px #000;
}
 
body {
	margin-left:auto;
	margin-right:auto;
	background-color: #e9e9e9;
}
 
#wrapper {
	width:740px;
	background-color:#FF9900; /* orange */
	margin:0 auto; /* horiz. centers the wrapper */
	margin-top:20px;
}
 
#header { /* from S4S style.css */
	margin:0;
	background-color:#CCFF00;
	font-family: Verdana, Geneva, Sans-Serif;
	font-size:12px; /* later add color and position in upper rt. corner with higher z-index */
	height:90px;
}
 
#navbar {
	background-color:#339933;
	height:21px; /* total height is 28px */
	padding: 7px 7px 0 7px;
	margin-left:0;
	margin-right:0;
	font-family: Verdana, Geneva, Sans-Serif;
	font-size:12px;
	text-align:center;
}
 
#photos {
	width:700px;  /* height:162px; */
	background-color:#cc6600;
	margin:0 auto;
}
 
#container { /* contains left, content, right columns */
	width:700px;
	background-color:#660099;
	margin:20 auto;
}
 
#leftcolumn{ /* Remember, content left margin must match this width */ 
	width:155px; 
	background-color:#ffffff;
	color:#0033cc; 
	clear:both;
	float:left;
} 
 
#content{ /* Left margin must match leftcolumn width */ 
	width:350px; /*total width is 390px -350 plus 20px padding on each side */
	padding:0 20px; 
	background-color:#0066ff;
	font-family: Verdana, Geneva, Sans-Serif;
	font-size:12px;
	text-align:center; 
	color:#000; 
	margin-left:155px;
	margin-top:0;
	float:left;
} 
 
#rightcolumn{ 
	width:155px;
	background-color:#ff6699;
	margin-left:545px;
	margin-top:0;
	float:right;
} 
 
#footer{
	clear:both;
	width:95%;
	background-color:#ffcc66; /* yellowish orange */
	margin:20px auto;
	border-top:solid thin #000;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, Sans-Serif;
	color:#000;
}
 
</style>
 
 
</head>
 
<body>
 
<div id="wrapper">
 
	<div id="header">
    <!-- <a href="index.html"><img src="images/FFSheader??.gif" alt="Frankford Friends School" /></a> -->
    </div>
 
		<div id="navbar"> HOME &nbsp;|&nbsp; ABOUT FFS &nbsp;|&nbsp; ACADEMICS &nbsp;|&nbsp; ADMISSIONS &nbsp;|&nbsp; PARENTS &nbsp;|&nbsp; ALUMNI &nbsp;|&nbsp; GIVING</div>
 
    			<div id="photos">This is where the 3 photos will be. I will save them as a single gif? with 3 across as a single unit?</div>
 
 
                <div id="container">
 
                	<div id="leftcolumn">This is the LEFT COLUMN. INSERT photo of new building.<br /><br /></div>
 
                		<div id="content">This is the CONTENT div ---where UPCOMING EVENTS are listed.<br /><br /><br /></div>
 
                	<div id="rightcolumn">This is the RIGHT COLUMN. INSERT photo of RED building.<br /><br /></div>
 
                </div><!-- end container -->
 
 
                	<div id="footer">
                    	&nbsp;FRANKFORD FRIENDS SCHOOL &nbsp;|&nbsp; 1500 ORTHODOX ST. &nbsp;|&nbsp; PHILADELPHIA, PA 19124 &nbsp;|&nbsp; 215.533.5368 &nbsp;|&nbsp; </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%46%72%61%6e%6b%66%6f%72%64%46%72%69%65%6e%64%73%40%76%65%72%69%7a%6f%6e%2e%6e%65%74%22%3e%46%72%61%6e%6b%66%6f%72%64%46%72%69%65%6e%64%73%40%76%65%72%69%7a%6f%6e%2e%6e%65%74%3c%2f%61%3e%27%29%3b'))</script><p>&nbsp;
                    </div>
 
 
 
</div><!-- end wrapper -->
 
 
</body>
</html>

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 5 years 12 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

http://validator.w3.org/unico

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

tebk77
Offline
Regular
Last seen: 8 years 9 weeks ago
Timezone: GMT-4
Joined: 2009-05-16
Posts: 42
Points: 49

divs still need help!

thanks for that link. I fixed the file but the 3-col divs still don't work.

This time I revised the file some and it was okayed by the validator.

Now the left div goes across and it doesn't have its white bkgrd. #ffffff;
I finally got the right div to go up and line up with middle col. (content div). Yet the right div also doesn't show it's bkgrd. color (also white #ffffff).

Before I had exact measurements for the 3 columns.
L width 155px,
CONTENT (middle) margin-left:155px, width 350px (incl.20px padding on both sides)
R- margin-left:545px, width 155px

This latest version I changed the CONTENT div to 50% width.

latest version URL link:

Here is the latest coding:

<!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="application/xhtml+xml; charset=utf-8" />
<meta name="keywords" content="Frankford Friends School, Quaker school for grades K to 8, Frankford Friends, Quaker school, Quaker education, education, Philadelphia, Frankford neighborhood, Frankford Quaker school" />
  <title>FFS TEST new home page</title>
 
<style type="text/css">
/* These styles would normally go in an external style sheet */
 
/* Universal style rule */
*{
  /* Block all browser default margins and padding */
  margin:0;
  padding:0;
  /* Temporary borders */
  border:dashed 1px #000;
}
 
body {
	margin-left:auto;
	margin-right:auto;
	background-color: #e9e9e9;
}
 
#wrapper {
	width:740px;
	background-color:#FF9900; /* orange */
	margin:0 auto; /* horiz. centers the wrapper */
	margin-top:20px;
}
 
#header { /* from S4S style.css */
	margin:0;
	background-color:#CCFF00;
	font-family: Verdana, Geneva, Sans-Serif;
	font-size:12px; /* later add color and position in upper rt. corner with higher z-index */
	height:90px;
}
 
#navbar {
	background-color:#339933;
	height:21px; /* total height is 28px */
	padding: 7px 7px 0 7px;
	margin-left:0;
	margin-right:0;
	font-family: Verdana, Geneva, Sans-Serif;
	font-size:12px;
	text-align:center;
}
 
#photos {
	width:700px;  /* height:162px; */
	background-color:#cc6600;
	margin:0 auto;
}
 
#container { /* contains left, content, right columns */
	width:700px;
	background-color:#660099;
	margin:20px auto 20px auto;
}
 
#leftcolumn{ /* Remember, content left margin must match this width */ 
	margin:0;
	width:155px; 
	background-color:#ffffff;
	float:left;
} 
 
#content{ /* Left margin must match leftcolumn width */ 
	margin-left:155px;
	width:50%; /*total width is 390px -350 plus 20px padding on each side */	
	background-color:#0066ff;
	float:left;
	padding-left:20px;
	padding-right:20px; 
	font-family: Verdana, Geneva, Sans-Serif;
	font-size:12px;
	text-align:center; 
	color:#000; 
}
 
#rightcolumn{ 
	margin-left:545px;
	width:155px;
	background-color:#ffffff;
	/* was margin-left:545px */;
	float:right;
}
 
#footer{
	clear:both;
	width:95%;
	background-color:#ffcc66; /* yellowish orange */
	margin:20px auto;
	border-top:solid thin #000;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, Sans-Serif;
	color:#000;
}
 
</style>
 
 
</head>
 
<body>
 
<div id="wrapper">
 
	<div id="header">
    <!-- <a href="index.html"><img src="images/FFSheader??.gif" alt="Frankford Friends School" /></a> -->
    </div>
 
		<div id="navbar"> HOME &nbsp;|&nbsp; ABOUT FFS &nbsp;|&nbsp; ACADEMICS &nbsp;|&nbsp; ADMISSIONS &nbsp;|&nbsp; PARENTS &nbsp;|&nbsp; ALUMNI &nbsp;|&nbsp; GIVING</div>
 
    			<div id="photos">This is where the 3 photos will be. I will save them as a single gif? with 3 across as a single unit?</div>
 
 
                <div id="container">
 
                	<div id="side-a">This is the LEFT COLUMN. INSERT photo of new building.<br /><br /></div>
 
                		<div id="content">This is the CONTENT div ---where UPCOMING EVENTS are listed.<br /><br /><br /></div>
 
                	<div id="side-b">This is the RIGHT COLUMN. INSERT photo of RED building.<br /><br /></div>
 
                </div><!-- end container -->
 
 
                	<div id="footer">
                    	&nbsp;FRANKFORD FRIENDS SCHOOL &nbsp;|&nbsp; 1500 ORTHODOX ST. &nbsp;|&nbsp; PHILADELPHIA, PA 19124 &nbsp;|&nbsp; 215.533.5368 &nbsp;|&nbsp; </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%46%72%61%6e%6b%66%6f%72%64%46%72%69%65%6e%64%73%40%76%65%72%69%7a%6f%6e%2e%6e%65%74%22%3e%46%72%61%6e%6b%66%6f%72%64%46%72%69%65%6e%64%73%40%76%65%72%69%7a%6f%6e%2e%6e%65%74%3c%2f%61%3e%27%29%3b'))</script><p>&nbsp;
                    </div>
 
 
 
</div><!-- end wrapper -->
 
 
</body>
</html>

tebk77
Offline
Regular
Last seen: 8 years 9 weeks ago
Timezone: GMT-4
Joined: 2009-05-16
Posts: 42
Points: 49

Could someone help please? --problem with arranging DIVs

Please look @ previous email.
Many thanks!